Implement the tree-like simulation function of three CheckBox States (all, half, not selected) in the GridView.

Implement the tree-like simulation function of three CheckBox States (all, half, not selected) in the GridView.

Du Niang posted many posts, saying that only three statuses should be replaced with images, but no useful examples were found, forcing herself to write one

There must be many third-party controls, such as jstree, which can be used directly.

Due to the company's UDS restrictions, you cannot upload images, but only text descriptions are supported.

To achieve the following effect in the gridview: level 1 and level 2 display the semi-selection status because the level 3 is not all selected

Primary level

Second-level

Level 3 1

Level 3 2

 

 

 

 

Js example

$ (Function () {BindCheckNode (); $ ("span [name ^ = 'lblcheck']"). click (checkBoxClick) ;}); function checkBoxClick () {var isChecked =$ (this ). attr ("class") = "default "? "Checked": "default"; $ (this ). attr ("class", isChecked); // synchronize checkbox $ (this ). next (). children (). eq (0 ). attr ("checked", isChecked! = "Default"); var trNode = $ (this ). parent (). parent (); childChange (trNode, isChecked); parentChange (trNode, isChecked);} // when data is bound, the node in the selected status is changed. If one subnode is not selected, function BindCheckNode () {// determines whether all the child nodes of the selected node are selected, $ ("span [name ^ = 'lblcheck']"). each (function () {if ($ (this ). attr ("class") = "checked") {var curNode = this. parentNode. parentNode; if (! CheckAll (curNode) {$ (this ). attr ("class", "checkHalf") ;}}) ;}// check the function CheckAll (curNode) {var level = parseInt ($ (curNode ). attr ("level"); var id = $ (curNode ). attr ("id"); var nextNode = $ (curNode ). next (); while (nextNode! = Null & parseInt ($ (nextNode ). attr ("level")> level) {// each node loops through all its subnodes to determine if var nextCheck = $ (nextNode) is selected ). children (). eq (0 ). children ("span "). eq (1); if ($ (nextCheck ). attr ("class") = "default") {return false;} nextNode = $ (nextNode ). next ();} return true;} // After the checkbox is clicked, the function childChange (curNode, className) {var level = parseInt ($ (curNode) is affected ). attr ("level"); var nextNode = $ (curNode ). next (); // Loop subnode while (nextNode! = Null & parseInt ($ (nextNode ). attr ("level")> level) {var nextCheck = $ (nextNode ). children (). eq (0 ). children ("span: eq (1)"); $ (nextCheck ). attr ("class", className); $ (nextCheck ). next (). children (). eq (0 ). attr ("checked", className! = "Default"); nextNode = $ (nextNode ). next () ;}// after the checkbox is clicked, the function parentChange (curNode, className) {var pid =$ (curNode) of the parent node is affected ). attr ("pid"); var parentNode =$ ("#" + pid); if (! $ (ParentNode ). attr ("pid") return false; var parentSpanCheck =$ (parentNode ). children (). eq (0 ). children ("span "). eq (1); var childList = $ ("tr [pid = '" + pid + "']"); var flag = false; var tempNode; $. each (childList, function (I, item) {tempNode = $ (item ). children (). eq (0 ). children ("span "). eq (1); if ($ (tempNode ). attr ("class ")! = ClassName) {flag = true; return ;}}); if (flag) {$ (parentSpanCheck). attr ("class", "checkHalf");} else if (! Flag & className = "checked") {$ (parentSpanCheck ). attr ("class", "checked");} else {$ (parentSpanCheck ). attr ("class", "default");} var parentSpanCheckClass =$ (parentSpanCheck ). attr ("class"); $ (parentSpanCheck ). next (). children (). eq (0 ). attr ("checked", parentSpanCheckClass! = "Default"); if (pid! = "0") changeParentState (parentNode, className );}View Code

Css transform is mainly used to move the background image. The image is arranged in [all selected] [not selected] [half selected]

<Style type = "text/css">. checked {background-position-x: 0px ;}. checkHalf {background-position-x: 23px ;}. default {background-position-x: 46px;} </style>View Code

C # the front-end worker has deleted unnecessary items. There is only one column in The gridview, which is similar to the preceding table. lbl_Space is used to increase indentation and keep the original checkbox, because the entire gridview needs to be traversed during storage, whether it is modifying the class attribute of span in the background or js, it cannot be obtained when traversing the gridview.

<Asp: GridView ID = "dgResource" runat = "server" AutoGenerateColumns = "False"> <Columns> <asp: templateField> <HeaderStyle Wrap = "False"> </HeaderStyle> <ItemStyle Wrap = "False"> </ItemStyle> <ItemTemplate> <asp: label runat = "server" ID = "lbl_Space" ForeColor = "# f5fbff" Text = '<% # GetSpaceNameFromLevel (DataBinder. eval (Container, "DataItem. nameValues [Level] "). toString () %> '> </asp: label> <span id = "lblCheck" name = "lblCheck" runat = "server" class = "default" style = "width: 23px; height: 25px; background-image: url (.. /.. /Common/Images/Icons/checkboxButton.jpg); "> </span> <div style =" display: none; "> <asp: checkBox runat = "server" ID = "chk_Query"> </asp: CheckBox> </div> <asp: Label runat = "server" Text = '<% # DataBinder. eval (Container, "DataItem. resourceName ") %> '> </asp: Label> <asp: HiddenField ID =" hfdPID "runat =" server "Value =' <% # Eval (" ParentResourceID ") %> '/> </ItemTemplate> </asp: TemplateField> </Columns> </asp: GridView>View Code

. Net protocol

For (int I = 0; I <dgResource. rows. count; I ++) {CheckBox chkQuery = (CheckBox) dgResource. rows [I]. findControl ("chk_Query"); // you can check whether the chkQuery is selected based on the Checked value of the chkQuery. Note: semi-selection is also selected}View Code