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

Source: Internet
Author: User

Figure can contain the implication and meaning is the text 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, see the following picture:


This requirement is to realize that someone has another feature, many-to-many relationships, such as a person who likes sports, like to surf the internet, and so on, so similar requirements in almost every system has a design, and many frameworks have realized such a function, if you want to achieve it, you need to create a table, logic, And the interface JS all need to write their own manual, the following is my design ideas.

design Ideas

Putting multiple checkboxes into a DIV element, using jquery's function into a div and a checkbox to control the selection, the value and assignment can be written in a loop can be completed, as for form submission can be used to use form tags, jquery can also be used to submit the Ajax, in the user experience requirements of the system is best to use the Ajax method of submission, which is the interface of the design department, as well as the establishment of database tables, I do the database table when I feel very simple but also encountered some problems.


Database needs to establish a relational table to store many-to-many relationships, we all know that it is important to note how to store in this relational table, that is, the ID of more than one check box is stored in a field or an ID a record, both of these methods can be implemented , if stored in a field, you need to handle the logic of 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 modified, so only the IDs exist in a field inside, feel this way to achieve also quite fast, reduce the logic.

There are two tables Fcs_checkitem, Fcs_useritem,fcs_useritem for the relational table, its itemids field holds the Itemid array of the Fcs_checkitem table, and you want to query with the following nested statement:

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), if you manually write a such data can be queried, but such a dynamic way is not found out, Internet search found that MySQL is not supported by such dynamic query, found that there is another 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.

So for example there are two tables A and table b,a a field IDs is an array of B table field ID, then give b.id two days plus%, Let the a.ids character array with commas, take a specific number for example is, 1, go to match, three-way, this string, just find a match will return a record, in this way to implement a query similar to in.


Concat () function
This function often joins multiple strings, such as

String str1= "World";
String str2= "Hello"
Str3=concat (STR1,STR2);
str3= "World Hello", this function connects these two strings together, sometimes feel very useful;


Group_concat () function, look at the effect

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


This function implements the conversion of a column of data found in a table into an array of strings, as shown here, which is useful if you want to convert a column that is identified 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 and so on, but also consider how to encapsulate the checkbox in the DIV tag, Later use only need to introduce this DIV tag, through the DIV tag to control multi-choice, this involves custom tags how to do, in. NET can develop user-defined controls, then in the label can also be found to develop a custom tag library, and similar to the drop-down list box, etc., can be encapsulated together.

I don't know if there's any other way of thinking. Can the user control, or label package be implemented? Develop custom tags look for a good implementation, the development of the jar introduced into the implementation of a few interfaces can define their own tag library, the development of custom tag library can achieve user-defined functions, convenient layout on the page, but also found many products about the interface framework, no matter how beautiful interface, high-end atmosphere, are encapsulated in the original HTML tag elements, encapsulation also means that can bring their own heart characteristics, if there is a special need for the time can be properly encapsulated.

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

Related Article

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.