Front End Frame (ii) DIV Multi-select check box package and MySQL database access

Source: Internet
Author: User
Tags manual writing

Figure can include the implication and meaning of words can not be compared to the first one you will know the main content of this article is about what the problem. Save a lot of text of the statement. Take a look at this picture below:


The requirement is to realize that someone has a second trait. Has a many-to-many relationship. For example, a person likes sports, like surfing the internet and so on. Similar requirements are designed in almost every system. And very many frameworks have implemented this function, assuming that they need to implement themselves from the establishment of tables, logic, and interface JS have to write their own manual, the following is my design ideas.

design Ideas

Place multiple checkboxes in a DIV element. Use jquery's functions into div and checkbox for control selection. Values and assignments can be written in a loop that can be completed. As for form submissions, it is possible to use the form label for tuning. Can also be submitted using jquery's AJAX approach. It is best to use Ajax to submit in a system with high user experience, which is the design department of the interface, and also the establishment of database tables, which I think is very easy when making database tables, but also has some problems.


The database needs to establish a relational table to store many-to-many relationships, and we all know that it is important to note how to store it in this relational table. That is, the ID of more than one check box is stored in a field or an ID one record. Both of these methods can be implemented, assuming that the logic stored in a field will have to handle this field in the Java class, I do the form from the form interface directly to the database SQL statement, the intermediate logic has been encapsulated can not be changed, so only the IDs exist in a field, Feeling this way to achieve is also quite fast, lowering the logic.


For example, the following are two tables Fcs_checkitem, Fcs_useritem. Fcs_useritem holds the Itemid array of the Fcs_checkitem table for the relational table whose Itemids field you want to query using the following nested statements:

SELECT * from Fcs_checkitemwhere itemid inch (select Itemids from Fcs_useritemwhere userid= ' 00000075 ')

The test is not able to query the results, because the nested query inside the result is a comma-separated string data (001,002. , 003), assuming that the manual writing of this data is able to query out, but such a dynamic way is not found out, the Internet to find out that MySQL is not supported by such dynamic query, found there is a way to achieve this keyword "in" function.

SELECT Group_concat (b.itemname) as Itemnames from Fcs_useritem A, Fcs_checkitem b WHERE concat (concat (', ', a.checkid), ', ' Like CONCAT (CONCAT ('%, ', b.itemid), ',% ') and a.userid= ': {$urlParam ("Formid")}: '

It uses the concat () and Group_concat () functions, which can be understood in a few words: using like to implement in functions.

For example, there are two table A and table b,a a field IDs is an array of B table field IDs. So give b.id two days plus%, let A.ids character array with commas at both ends. Take a detailed example of a sample that is, 1, go to match, three-way, this string, just to find a match will return a record. In this way, a query similar to in is implemented.


Concat () function
This function often uses words to concatenate multiple strings, such as

String str1= "World";
String str2= "Hello"
Str3=concat (STR1,STR2);
str3= "Hello World", this function connects the two strings together, sometimes it is considered very practical;


The Group_concat () function. Take a look at the effect

This is a simple query result, and then look at the effect of using this function


This function enables the conversion of a column of data found in a table into an array of strings. As you can see, it is very useful to assume that you want to convert a column to a string array.


This multi-select can be encapsulated as a particle, the common things abstracted out into a particle, it is encapsulated as a control, the control has its own function to obtain the checkbox value and Assignment methods, but also to encapsulate some styles, etc., but also consider how to encapsulate the checkbox into the div tag. In the future, it is only necessary to introduce this DIV tag to control multiple selections via div tag. This involves the definition of how the label is made, in. NET to develop the user's own definition of the control, then in the label is also able to develop their own definition tag library, and similar to the drop-down list box, etc., can be encapsulated.

Don't know if there's any other way to implement user control, or label encapsulation? Develop your own definition tags check out the good implementation. The introduction of the development jar into the implementation of a number of interfaces to define their own tag library, the development of their own definition tag library to achieve user-defined functions. Convenient layout on the page, at the same time found a lot of products today about the interface framework, no matter how beautiful the interface, high-end atmosphere. are encapsulated in the original HTML tag elements, encapsulation also means that can bring their own heart features, assuming that there is a special need to be able to properly encapsulate themselves.

Easy programming for others, and improved development efficiency and coding flexibility.

Front End Frame (ii) DIV Multi-select check box package and MySQL database access

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.