1. Application Requirements
In the rights system development in addition to the above data table relationship design, the more troublesome place is the Cascade module in the page display, because the design is the most control to three levels, so the three-level cascade module display, editing and other page operation is a need to solve the problem, where the use of Kendoui kendodropdownlist to achieve, it can easily achieve the effect we want to achieve. Basically the following:
The relationship is as follows: General support subsystem (first level) contains: System Management, user management, log management (level two) subsystem, and the system management subsystem contains the management module (Level three module). Each level of change, its subordinate level module will change accordingly.
2. code Examples
Here's some code to explain the effect we've achieved earlier, and the data here is the data that simulates us. The basic effect of the page is as follows:
First, using Kendoui requires the introduction of the corresponding js file, introduced here:jquery.min.js and Kendo.all.min.js can be.
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> all controls are datasource from the same array, filtered by filters <br/> parent element: <select I D= "First" ></select> <br/> Child elements: <select id= "Second" ></select> <br/> Sub-element details: < ;d IV id= "grid" style= "width:100%; height:500px; " ></div> <br/></body>
It is simple to define the first-level module, the Select label for the two-level module, and the presentation label Div for the three-level module , and give the ID attribute. Note: The display of the level three module, which is used in the Kendoui in the kendogrid, can define our own display table, here temporarily do not introduce The use of Kendogrid, though there are many common places between the two.
JS section:
<script type= "Text/javascript" >//data var globalData = [{"id": "0", "pid": "+", "bz_id": "-1", "Su b_id ":"-1 "," Value ":" Universal Support Subsystem "}, {" id ":" 1 "," pid ":" 1 "," bz_id ":"-1 "," sub_id ":" 1 "," value ":" Compute Resource Management Subsystem "}, {" id ":" "," pid ":" "", "bz_id": "0", "sub_id": "1", "Value": "User Management"}, {"id": "2", "pid": "" "," bz_id ":" 0 "," sub_id ":" 1 "," Value ":" Log Management "}, {" id ":" 3 "," pid ":" $ "," bz_id ":" 1 "," sub_id ":" 1 "," Value ":" Node Load View "}, {" id ":" 4 "," pid ":" PNs "," bz_id ":" 1 "," sub_ ID ":"-1 "," Value ":" Node Usage view "}, {" id ":" 5 "," pid ":" "," 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": "Administrative 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 Payload "}, {" id ":" 6 "," pid ":" 3217 "," bz_id ":" 1 "," sub_id ":" 4 ","Value ":" CPU Utilization "}, {" id ":" 7 "," pid ":" 3218 "," bz_id ":" 1 "," sub_id ":" 4 "," Value ":" Memory Utilization "}]; var firstdropdownlist = null; var seconddropdownlist = null; var grid = null; $ (document). Ready (function () {//Initialize control Firstdropdownlist = $ ("#first"). Kendodropdownlist ({dat Atextfield: "Value", DataValueField: "Value", datasource:{<span style= "COLOR: #FF000 0; " >data:globalData</span>},<span style= "color: #3333FF;" >template:kendo.template ($ ("#template"). html ()),</span> change:function () { Update drop-down list 2 and tabular data after modifying values 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={logi C: "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: "Modulo Block pid ", field:" pid "}, {title:" Module name "(Field:" Value "}]}). Data (" Kendogrid "); Initialize control end//Initial data filter 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= "#:p id#" bz_id= "#:bz_id#" Sub _id= "#:sub_id#" value= "#:value#" >#:value# </option></script></span>
Here are a few things to keep in mind:
1. Data sources for controls
Since the first-class module, the two-level module and the three-level module are all part of the module type of data, so the data in these three categories can be used a set, and then through the filter control to display the data of different modules, such as JS The dataSource part of the red callout in the code , which takes one copy of the data:globalData(of course, the data here can be from PHP Data obtained in PHP , the code is:data:<?php echo $globalData;? >).
data formats in DataSource must be in the form of JSON , so no matter the data source is JS or a PHP The data created by the structure must be JSON format.
2. Display templates for controls
Defines the display template for the control so that we have a better control over the display of the control, adding a filterto the control,such as the blue callout part of the upper JS is the definition and use of the template, for example:< Option id= "#:id#" pid= "#:p id#" bz_id= "#:bz_id#" sub_id= "#:sub_id#" value= "#:value#" >#:value# </option> , so that we can Filter Use the spatial attributes we define for example: ID , PID , bz_id control the relationship of the controls to each other.
3. Data filtering filter for controls
Filter, whichis filtering , filters the data set in the dataSource of the control and then displays it in the control. Here is an example of the effect of filter usage.
First, when initializing, I want to display the first level module in the Level module control, the level two module shows the level two module contained in the module corresponding to the modules, and in the three-level module, the corresponding three-level module is displayed. Initialize: FirstDropDownList.dataSource.filter ({field: "bz_id", Operator: "EQ", Value:-1}); control the first-level module shows that the rules defined here are the first-level modules of the bz_ id = =-1; level Two module is displayed according to the value of the first level 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 level three module is displayed according to the values of the first and two 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 for controls
When the first-level module value changes, the values of the two-level module and the three-level module change, and the value of the three-level module changes when the value of the two-level module changes. This is changed by the change event in kendodropdownlist , as for the rule, it is the same as above, with the first-level module change as an example:
Change:function () { //Modify value after update drop-down list 2 and tabular data <span style= "font-family: Arial;" > </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); }var seconddropdownlist = $ ("#xxx"). Kendodropdownlist ({...}). Data ("kendodropdownlist"); the. Data section, otherwise it will error.
Use of kendodropdownlist control in Kendoui--implementation of level three Cascade module
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
