MVC tree Node Table format authorization

These few nights in the mind quite not calm, but JS Level limited, the foreground effect takes four days, the background pass value one day, until last night ox test preliminary completed, is actually a to tree to authorize, online open source plug many, such as Treejs, Easyui and so on, just here authorized slightly different, such as, Can only be implemented in table. A line of writing JS, the last to write almost a more than 100 lines.

The original interface of the project is not convenient, here is to write an original ecological Demo

, first this is a table, regardless of the side point or leaf node as a row (TR), the Function menu list of the middle node (no branch) corresponding to the new, modified six functions (check box)

First of all, the front desk needs to achieve the effect:

① Click on the branch, all the nodes (branches/leaves) shrink/unfold.

② Click the check box in front of the minor point, and the check box for all nodes (branches/leaves), row of the leaf node is checked/canceled

Eg: Click the check box in the blue Circle, and all the checkboxes in the red box are checked/canceled

For JQ, a jquery selector can be used to determine the element, as long as a value, name, ID, and so on can be given for each label

Nested a label with ID spid for all minor points <span> used to identify

<TRID= "11000"><TDcolspan= "7"><inputname= "C0"ID= "1-0000c"type= "checkbox"/><spanID= "spid" >1-0000</span></TD></TR><TRID= "11-000"style= "text-indent:10px">    <TD><inputname= "C1"ID= "11-000c"type= "checkbox"/><span>11-000</span></TD>    <TD><inputname= "A"ID= "11-000ca"type= "checkbox"/></TD>    <TD><inputname= "B"ID= "11-000CB"type= "checkbox"/></TD>    <TD><inputname= "C"ID= "11-000cc"type= "checkbox"/></TD>    <TD><inputname= "D"ID= "11-000CD"type= "checkbox"/></TD>    <TD><inputname= "E"ID= "11-000CE"type= "checkbox"/></TD>    <TD><inputname= "F"ID= "11-000CF"type= "checkbox"/></TD> </TR>

To put it bluntly, it is to use table to achieve a tree effect, where the child nodes and leaf nodes are used <tr> indentation length to achieve the effect of hierarchical nodes

For shrink/unfold

You can use toggle () to hide/expand child nodes as long as you are able to select the span tag inside the minor points. According to the naming characteristics of the use of splicing ID method to select child nodes, can be implemented.

Then divide the situation, in order to determine the mouse click is a few points, if it is a level, you only need to hide/expand the leaf node under it, if it is level two, to hide/expand its sub-point, leaf node;

For example, when you click on the side of the basket 23-000, the leaf node 231-00, 23200, the side point 23300 and the leaf node 2331-0, 2332-0 are hidden/expanded.

var lenth = $ (this). Parent (). Parent (). attr (' id '). indexOf ("-");                       var s = $ (this). Parent (). Parent (). attr (' id '). substring (0, lenth);

Before judging, the current object is located in the TR ID of the character-the position, according to the position of the current mouse click on the level of the point, and then hide/expand its next node can, at this time the corresponding lenth = = 2, there is

$ (this). Parent (). Parent (). Siblings ("#" + S + i + '-' + ' xx '). Toggle ();     for (var q = 1; q < 6; q++) {      if ($ ("#" + S + i + q + '-' + ' 0 '). Is (": Hidden")) {           $ ( /c8>this). Parent (). Parent (). Siblings ("#" + S + i + q + '-' + ' 0 '). Toggle ();          }       $ (this). Parent (). Parent (). Siblings ("#" + S + i + q + '-' + ' 0 '). Toggle ();   }    

If lenth = = 3, which is the innermost point, there is

$ (this). Parent (). Parent (). Siblings ("#" + S + i + '-' + ' 0 '). Toggle ();

If Lenth ==1, that is, the outermost side of the point (root node), the same as the ID of the stitching method to judge, the difference is that the need for more than one layer of the loop

$( This). Parent (). Parent (). Siblings ("#" + S + i + '-' + ' 000 ')). Toggle ();  for(varj = 1; J < 6; J + +) {      if($ ("#" + S + i + j + '-' + ' xx '). Is (": hidden"))) {            $( This). Parent (). Parent (). Siblings ("#" + S + i + j + '-' + ' 00 ')). Toggle (); }      $( This). Parent (). Parent (). Siblings ("#" + S + i + j + '-' + ' 00 ')). Toggle ();  for(varp = 1; P < 6; p++) {          if($ ("#" + S + i + j + p + '-' + ' 0 '). Is (": hidden"))) {                $( This). Parent (). Parent (). Siblings ("#" + S + i + j + p + '-' + ' 0 ')). Toggle (); }          $( This). Parent (). Parent (). Siblings ("#" + S + i + j + p + '-' + ' 0 ')). Toggle (); } }

According to the observation comparison, the discovery is a layer of the choice of nodes, the more the node, the most outside is the root node, then the need to traverse the more levels, the same, the more the inside, the less the number of traversal. Using a lot of if else statements, which are nested with the For statement, layers of buckle, after writing, I feel that, in addition to their own, it is difficult to estimate that another person can understand in a short period of time, they do not go to maintain their own written this menu authorization. Careful thinking, in fact, can be a lot of optimization code, such as: Click on the third layer needs to cycle the second layer and the first layer, click on the second layer needs to cycle the first layer, click on the first layer needs to cycle the leaf node below, then my final solution is directly placed in a method, and then using $.each () to Traverse, Put the leaf node at the bottom, layer by layer, so that the code looks very comfortable, the quality has improved a lot.

For radio/multi-select/Select All/Inverse

The relative judgment of the situation is more complex, first of all, the situation is discussed, the idea is as follows

If tick the first column (11-000, 12-000) where the authorization line (leaf node) is located

None of the preferred nodes in the row are checked (new, modified, deleted, etc.)

Else

If tick the other column where the authorization line is located

When the number is not less than 11, its first column is also checked (related to the background of the value)

When the number is 0 o'clock (click twice), the first column is not checked

else Tick Point

If a-level node traverses its lower

If level two nodes traverse the

If level three nodes traverse the

So, all the circumstances are taken into account, step by step, a line of code JS, you can achieve the requirements, code a bit more, the idea is that, here is not affixed to the detailed code

The above is the effect of the foreground, the following is the background value, here are some tips, it is worth saying, I give each license corresponding TD are endowed with the name value, here its value corresponds to a function table in a feature data in a column, for example, select 11-000, add, delete; The table will authorize the column to record A, B. Write here, is nothing more than some value, the direct record with Ajax to pass the background to accept, with the push method, specific in the MVC and AJAX applications to delete a section has a detailed record. There is no further repeating here. Written here, the only thing worth saying in this article is the following. When the permissions of a role are modified, the first time the interface is loaded, the check boxes in the table tables are checked against the function and permissions of the role itself. To be blunt is to click on the modification, there will be the action of the value, first go to the database according to the role of the primary key information, to skim its own functions and corresponding permissions, according to these data in the table of the checkbox will have an initial value.

It's very convenient to use each of them here.

First in the background to get two columns (feature list, permissions) collection, and then upload to the foreground view (authlist)

Then convert it to a Json array based on @Html. Raw (Json.encode (authlist))

Then iterate over it, and finally give the authorization check box an initial value based on its value, as follows:

functionGetcheck () {$ ("Input[type=checkbox]"). Prop ("Checked",false); varData=@Html. Raw (Json.encode (authlist)); $.each (data,function(I, item) {varArray = Item. Webfunctitem.tostring (). Split (', '); varLocal = Item. Functid.tostring (). IndexOf ("0"); varSfunctid = Item. Functid.tostring (). substring (0, local); $("#" + Sfunctid + '-' + getzero (local) + ' u '). Prop ("Checked",true);  for(vari = 0; i < Array.Length; i++) {             $("#" + Sfunctid + '-' +getzero (local) + ' U ' +array[i]). Prop ("Checked",true);   }      }); }

Recently are busy with the foreground style, this project to go here, really let their own JS level to improve a, business level of the best improvement is indeed practice, and then constantly testing, testing, testing

The city laughed and raised his hand to tease

MVC tree Node Table format authorization