Home > Developer > Web Develop
Use of the KendoDropDownList control in KendoUi-Implementation of the level-3 cascade Module,
1. Application Requirements
In addition to the above data table relationship design in permission system development, it is troublesome to display the cascade module on the page. In the design, it is up to three levels of control, therefore, page operations such as presentation and editing of level-3 cascade modules need to be solved. Here we use KendoDropDownList in KendoUi to achieve the desired effect easily. The basic information is as follows:
For example, the general support subsystem (level 1) includes system management, user management, and log management (level 2) subsystems. The system management subsystem also contains management modules (level 3 modules ). The subordinate level modules of each level change accordingly.
2. Sample Code
The following code explains the effects we have previously achieved. The data here also simulates the data above. The basic effect of the page is as follows:
First, you need to introduce the corresponding js files to use KendoUi. Here we can introduce jquery. min. js and kendo. all. min. js.
HTML section:
<Link href = "kendo.bootstrap.min.css" rel = "stylesheet" type = "text/css"/> <link href = "kendo.common.core.min.css" rel = "stylesheet" type = "text/css" /> <link href = "kendo.common.min.css" rel = "stylesheet" type = "text/css"/> <script type = "text/javascript" src = "jquery. min. js "> </script> <script type =" text/javascript "src =" kendo. all. min. js "> </script> <body> the dataSource of all controls comes from the same array, and filter criteria <br/> parent element: <select id = "first"> </select> <br/> sub-element: <select id = "second"> </select> <br/> sub-element details: <div id = "grid" style = "width: 100%; height: 500px;"> </div> <br/> </body>
It is easy to define the select tag of the level-1 module and level-2 module, and the display tag div of the level-3 module, and give the id attribute. Note: the presentation of Level 3 modules uses KendoGrid in KendoUi, which can define our own display tables. The usage of KendoGrid is not introduced here, although there are many similarities between the two.
JS section:
<Script type = "text/javascript"> // data var globalData = [{"id": "0", "pid": "32", "bz_id ": "-1", "sub_id": "-1", "value": "General support subsystem" },{ "id": "1", "pid ": "33", "bz_id": "-1", "sub_id": "-1", "value": "computing resource management subsystem" },{ "id ": "1", "pid": "34", "bz_id": "0", "sub_id": "-1", "value": "user management "}, {"id": "2", "pid": "35", "bz_id": "0", "sub_id": "-1", "value ": "log management" },{ "id": "3", "pid": "36", "bz_id": "1", "sub_id": "-1 ", "value": "view node load" },{ "id": "4", "pid": "37", "bz_id": "1", "sub_id ": "-1", "value": "view node usage" },{ "id": "5", "pid": "38", "bz_id ": "0", "sub_id": "-1", "value": "System Management" },{ "id": "0", "pid": "3211 ", "bz_id": "0", "sub_id": "5", "value": "management module" },{ "id": "1", "pid ": "3212", "bz_id": "0", "sub_id": "1", "value": "management role" },{ "id": "2 ", "pid": "3213", "bz_id": "0", "sub_id": "1", "value": "manage user" },{ "id ": "3", "pid": "3214", "bz_id": "0", "sub_id": "2", "value": "view log "}, {"id": "4", "pid": "3215", "bz_id": "1", "sub_id": "3", "value ": "network load" },{ "id": "5", "pid": "3216", "bz_id": "1", "sub_id": "3 ", "value": "IO load" },{ "id": "6", "pid": "3217", "bz_id": "1", "sub_id ": "4", "value": "CPU usage" },{ "id": "7", "pid": "3218", "bz_id": "1 ", "sub_id": "4", "value": "memory usage"}]; var firstDropDownList = null; var secondDropDownList = null; var grid = null; $ (document ). ready (function () {// initialize the control firstDropDownList =$ ("# first "). kendoDropDownList ({dataTextField: "value", dataValueField: "value", dataSource: {<span style = "color: # FF0000;"> data: globalData </span> }, <span style = "color: # 3333FF;"> template: kendo. template ($ ("# template" ).html (), </span> change: function () {// After modifying the value, update the drop-down list 2 and table data var sed_filter = {logic: "and", filters: []}; var one_filter = {field: "bz_id ", operator: "eq", value: parseInt (this. dataItem (). id)}; var two_filter = {field: "sub_id", operator: "eq", value:-1}; sed_filter.filters.push (one_filter); sed_filter.filters.push (two_filter); secondDropDownList. dataSource. filter (sed_filter); var filter = {logic: "and", filters: []}; var bz_filter = {field: "bz_id", operator: "eq", value: parseInt (this. dataItem (). id)}; var sub_filter = {field: "sub_id", operator: "eq", value: parseInt (secondDropDownList. dataItem (). id)}; filter. filters. push (bz_filter); filter. filters. push (sub_filter); grid. dataSource. filter (filter );}}). data ("kendoDropDownList"); secondDropDownList = $ ("# second "). kendoDropDownList ({dataTextField: "value", dataValueField: "value", dataSource: {<span style = "color: # FF0000;"> data: globalData </span> }, <span style = "color: # 3333FF;"> template: kendo. template ($ ("# template" ).html (), </span> change: function () {var filter = {logic: "and", filters: []}; var bz_filter = {field: "bz_id", operator: "eq", value: parseInt (firstDropDownList. dataItem (). id)}; var sub_filter = {field: "sub_id", operator: "eq", value: parseInt (this. dataItem (). id)}; filter. filters. push (bz_filter); filter. filters. push (sub_filter); grid. dataSource. filter (filter );}}). data ("kendoDropDownList"); grid = $ ("# grid "). kendoGrid ({dataSource: {<span style = "color: # FF0000;"> data: globalData </span>}, columns: [{title: "module PID", field: "pid" },{ title: "module name", field: "value"}]}). data ("kendoGrid"); // The initialization control ends. // The initial data is filtered out by firstDropDownList. dataSource. filter ({field: "bz_id", operator: "eq", value:-1}); var sed_filter = {logic: "and", filters: []}; var one_filter = {field: "bz_id", operator: "eq", value: parseInt (firstDropDownList. dataItem (). id)}; var two_filter = {field: "sub_id", operator: "eq", value:-1}; sed_filter.filters.push (one_filter); sed_filter.filters.push (two_filter); secondDropDownList. dataSource. filter (sed_filter); var filter = {logic: "and", filters: []}; var bz_filter = {field: "bz_id", operator: "eq", value: parseInt (firstDropDownList. dataItem (). id)}; var sub_filter = {field: "sub_id", operator: "eq", value: parseInt (secondDropDownList. dataItem (). id)}; filter. filters. push (bz_filter); filter. filters. push (sub_filter); grid. dataSource. filter (filter) ;}); </script> <span style = "color: # 3333FF; "> <script id =" template "type =" text/x-kendo-template "> <option id =" #: id # "pid = "#: pid # "bz_id =" #: bz_id # "sub_id =" #: sub_id # "value =" #: value # "> #: value # </option> </script> </span>
Pay attention to the following points:
1. Control Data Source
Because the level-1 module, level-2 module, and level-3 module are actually data of the module type, you can use a set of data in these three types, and then use the filter control to display data of different modules, the dataSource marked in red in the JS Code above adopts a copy of data: globalData (of course, the data here can be obtained from PHP. If the data in PHP is used, the code is: data: <? Php echo $ globalData;?> ).
The data format of data in dataSource must be JSON. Therefore, no matter whether the data source is JS or PHP, the constructed data must be in JSON format.
2. display template of the control
The display template of the control is defined to allow us to better control the display of the control and add filter to the control. The blue annotation section in the above JS is the template definition and use, for example: <option id = "#: id #" pid = "#: pid #" bz_id = "#: bz_id #" sub_id = "#: sub_id #" value = "#: value # ">#: value # </option>, so that we can use the space attributes we define in the filter, for example: id, pid, and bz_id control the relationship between controls.
3. filter controls
Filter is used to filter data sets in the dataSource of the control and display them in the control. The following uses the effect in the example as an example to explain how to use filter.
First, I want to display the first level-1 module in the level-1 module control and the level-2 module in the level-2 module, in the third-level module, the corresponding third-level module is displayed. At initialization: firstDropDownList. dataSource. filter ({field: "bz_id", operator: "eq", value:-1}); control level-1 module display, the rule defined here is bz_id =-1 of the level-1 module; The level-2 module is displayed based on the value of the level-1 module:
var sed_filter={logic:"and", filters:[]};var one_filter={field:"bz_id", operator:"eq", value: parseInt(firstDropDownList.dataItem().id)};var two_filter={field:"sub_id", operator:"eq", value: -1};sed_filter.filters.push(one_filter);sed_filter.filters.push(two_filter);secondDropDownList.dataSource.filter(sed_filter);The display rule of the level-2 module is bz_id of the level-2 module = Value of the level-1 module & sub_id =-1;
The level-3 module is displayed based on the values of the level-1 and level-2 modules:
var filter={logic:"and", filters:[]};var bz_filter = {field:"bz_id", operator:"eq", value: parseInt(firstDropDownList.dataItem().id)};var sub_filter = {field:"sub_id", operator:"eq", value: parseInt(secondDropDownList.dataItem().id)};filter.filters.push(bz_filter);filter.filters.push(sub_filter);grid.dataSource.filter(filter);
4. Click events of controls
When the value of the level-1 module changes, the values of the level-2 module and level-3 module change. When the value of the level-2 module changes, the value of the level-3 module changes. This is changed through the change event in the KendoDropDownList. As for the rule, it is very similar to the above. The first-level module change is used as an example:
Change: function () {// modify the value and then update the drop-down list 2 and table data <span style = "font-family:; "> </span> var sed_filter = {logic:" and ", filters: []}; var one_filter = {field:" bz_id ", operator:" eq ", value: parseInt (this. dataItem (). id)}; var two_filter = {field: "sub_id", operator: "eq", value:-1}; sed_filter.filters.push (one_filter); sed_filter.filters.push (two_filter); secondDropDownList. dataSource. filter (sed_filter); var filter = {logic: "and", filters: []}; var bz_filter = {field: "bz_id", operator: "eq", value: parseInt (this. dataItem (). id)}; var sub_filter = {field: "sub_id", operator: "eq", value: parseInt (secondDropDownList. dataItem (). id)}; filter. filters. push (bz_filter); filter. filters. push (sub_filter); grid. dataSource. filter (filter );}In addition, if you want to use secondDropDownList. dataItem (). id to obtain other attribute values in the template, such as bz_id and sub_id, you must add the following when defining secondDropDownList:
Var secondDropDownList = $ ("# xxx"). The. data section of kendoDropDownList ({...}). data ("kendoDropDownList"); otherwise, an error is reported.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
