Mvc4+easyui-based Web development Framework Experience Summary (1)-Display selection records using the jquery Tags Input plugin

Recently spent a lot of time in refactoring and further refining my web development framework, and strive to in the user experience and interface design, and WinForm development framework to maintain consistency, while on the web, I mainly use Easyui front-end Interface processing technology, take the MVC technology route, in the reconstruction process, Many details spend a lot of time to research and refining, step by step, but also accumulated a lot of experience, this series will mainly introduce me to further improve my web framework based on the accumulation of experience to share, this essay mainly introduces the use of jquery Tags Input plugin display selection record.

I am using the jquery Tags Input plugin, always want to find a suitable jquery plug-in or appropriate practice, to achieve my WinForm framework inside the permission system of a user selection scene, is able to record the user's choice, and ultimately can be saved to the database. In the WinForm, I can use the way of custom control, very good implementation of this function, but in the Web interface, I tried to use jquery tried a lot of methods, failed to achieve this effect, spent a lot of time to find, finally found this good plug-in.

First look at my final implementation of the Web interface effect, that is, in the rights management system, the organization contains the user editing interface, or the role contains the person's editing interface, provide a place to record the user's choice, the user confirmed, you can save the contents of the record into the database.

The " selected user " in the following area is where I use this control to show the user's choice of people information.

In fact, the main purpose of this jquery tags input plug-in is used to record the user input of the tag, it can be in a blank place to accept the input content, as shown below.

However, this jquery plug-in can also block the user's input, we can add it through javaascript, so it just fits the needs of my example above, this jquery plugin is (http://xoxco.com/projects/code/ tagsinput/), GitHub is (https://github.com/xoxco/jQuery-Tags-Input).

1, jQuery Tags Input plug-in use

Apply the script and the style file as shown below.

<src= "jquery.tagsinput.js"></script><rel= "stylesheet"  Type= "text/css" href/>           

Because of the integration in the MVC project, you need to tidy up the appropriate path, and the path to my project code reference is as follows.

    @*tag Label control app *@    <src= "~/content/jquerytools/tags-input/jquery.tagsinput.js"></  Script<rel= "stylesheet" type= "text/css" href/>    

A simple example is to create an input box with a list of tags in the required table dropdowns, you can set the default or current tags in value, separated by commas.

<name= "tags" id= "tags" value/>     

As I have added a layer to the view of the MVC project, which is used to place user-selected user information, and unlike the example above, my input defaults to NULL, as shown below.

       <DivId= "Tbeditchoise"Data-options= "Region: ' South ', Split:true,title: ' Selected user ', Iconcls: ' Icon-book '"Style= "padding:5px;height:150px"><DivId= "Selectedusers" Title= "Selected user"  Data-options= "iconcls: ' Icon-view '"  Style= "height:100px" > < input name= "tags" Span style= "color: #ff0000;" > Id= "tags"  Value= "" Span style= "color: #0000ff;" >/> </div> Span style= "color: #0000ff;" ></div>       

This plugin can mask the tag tag input on the interface, allowing the script to write different tags as needed. You can use the Addtag () and Removetag () function to add and remove tags, as follows:

$ (' #tags '). Addtag (' foo '); $ (' #tags '). Removetag (' Bar ');

You can also use the Importags () method to enter a set of tag lists, and it is important to note that this will replace the tag set in value.

$ (' #tags '). Importtags (' Foo,bar,baz ');

If the pass parameter is empty, it is equivalent to emptying the list.

$ (' #tags '). Importtags (');

Use Tagexist () to determine whether a label exists:

if ($ (' #tags '). Tagexist (' foo ')) {...}

The plugin can also accept an automatic prompt insertion, as shown below.

$ (' #tags '). Tagsinput ({  autocomplete_url: ' Http://myserver.com/api/autocomplete '}); 

If you want to add extra functionality or trigger other actions when adding or removing tags, you can specify a callback in both the Onaddtag and Onremovetag parameters. Both of these functions return a label value as a parameter

$ (' #tags '). Tagsinput ({                width: ' Auto ',                onaddtag:function(tag) {                    console.log (' added ' + tag)                },                Onremovetag:function(tag) {console.log (' deleted ' +Tag)}});     

As mentioned above, you can block the interface tag tag input, and through the script to insert the label, or you want to provide other interactive ways to add the label, you can add a value of false interactive parameter, so that the increase of the label is forbidden, The other functions and presentation are the same as the original.

$ (' #tags '). Tagsinput ({                width: ' Auto ',                onremovetag:function(tag) {                    Console.log (' Remove Tags: ' + ' "' +tag+ '" ')                },                Interactive:false });       

The full invocation syntax code for this plugin is shown below and can be used as needed.

$ (selector). Tagsinput ({' Autocomplete_url ': {option: Value, Option:value}, ' height ': ' 100px ' true:callback_function, ' OnChange ' true, ' minchars ': 0, ' Maxchars ': 0 //if not provided there is no limit, ' placeholdercolor ': ' #666666 ' } ';    

2. Use the jquery Tags Input plugin in the project

The previous introduction of the various uses of the plug-in, which we see, the main is to record user selection or input name, but we display user content in the interface, but also need to remember the ID of the corresponding content, because we need to save the selection of the user's ID, not its name, then how should we do?

As mentioned earlier, in the interface, we need to add a layer in the view, to place the contents of this tag, and make it a good layout.

       <DivId= "Tbeditchoise"Data-options= "Region: ' South ', Split:true,title: ' Selected user ', Iconcls: ' Icon-book '"Style= "padding:5px;height:150px"><DivId= "Selectedusers" Title= "Selected user"  Data-options= "iconcls: ' Icon-view '"  Style= "height:100px" > < input name= "tags" Span style= "color: #ff0000;" > Id= "tags"  Value= "" Span style= "color: #0000ff;" >/> </div> Span style= "color: #0000ff;" ></div>       

We then add a few buttons inside the Easyui DataGrid control to manipulate the label, which is to record, save and clear a few important operations.

Part of the code is shown below.

Toolbar: [{id: ' btnaddchoise ', text: ' Add Selection ', Iconcls: ' Icon-add ', Handler:function() {addchoise ();//Implementing Add Records}, }, ‘-‘, {id: ' Btncomplete ', text: ' Finish selection ', Iconcls: ' Icon-ok ', Handler:function() {completechoise ();// Complete the selection and return , Handler: function () {clearechoise (); //}}, '-' , Handler: function () { // Implementation refreshes the data in the column $ ("#grid"). DataGrid ("Reload" ); } }], 

As described earlier, we need to display the name, but also to record the selected project ID (user ID), then we can use two list objects to record them, they are written in the same order, the obtained subscript is the same.

We first initialize the list and tags tag objects, and add an encapsulation operation that adds the user's encapsulation and removal, as shown in the code below.

<script type= "Text/javascript" >$(function() {$ (' #tags ')). Tagsinput ({width: ' auto ', Height: ' 100px ', Onremovetag:function(tag) {var i =Addnamelist.indexof (tag);var id =Adduserlist[i]; Removeuser (ID, tag); },InteractiveFalse}); });var adduserlist =NewArray ();var addnamelist =new Array (); function AddUser (ID, name) { if ($.inarray (ID, adduserlist) = = -1$ ( #tags ' ). Addtag (name); }} function Removeuser (ID, name) {if ($.inarray (ID, adduserlist)! = -1$ ( "#tags '              

Clear the user selected tag operation, the code is also very simple, all of the content I introduced in section 1, skilled application just.

            Clear User Select Record            function clearechoise () {                $ (' #tags '). Importtags ('newnew ' Array (); }

The most important saving operation is to put a list of stored user IDs and pass them to the corresponding Ajax call.

            //Complete the selection and returnfunctionCompletechoise () {var ouid = $ (' #txtID '). Val ();if (Ouid! = "" ") {var url = '/ou/editouusers?r= ' +Math.random (); Saveaction (URL, ouid, adduserlist); } $ ("#DivEditUser"). Dialog (' Close '); Reloadrelation ();//Re-refresh}// Save agency user action function< Span style= "color: #000000;" > Saveaction (URL, id, newlist) {$.ajax ({type: ' POST ' falsefunction); $ (' #DivEditUser '). Dialog (' Close ' function (XHR, status, error) {$.messager.alert ("prompt", "operation failed"); //xhr.responsetext 

Finally, we can see the real results smoothly.

The whole interface is the one that started.

And my WinForm authority system inside the corresponding interface comparison, is not found very close to it? Using Easyui to create a web interface, the same can be done very good oh.

Mvc4+easyui-based Web development Framework Experience Summary (1)-Display selection records using the jquery Tags Input plugin