關於jQuery Easyui Treegrid如何實作顯示checkbox功能的實例

本文透過實例程式碼介紹jQuery Easyui Treegrid實作顯示checkbox功能的方法，程式碼簡單易懂，非常不錯，具有參考借鏡價值，需要的朋友參考下吧

下面透過本文給大家介紹下圖中的treegrid如何實現？

要求：動態載入；級聯勾選；通關類型判斷顯示包庫/還是鏡像（列有所不同，鏡像共4列），勾選一個複選框，後面的複選框變成不可勾選狀態。

下面是具體程式碼：

1，初始化treegrid，（其中有幾個type列，是由後台人員提供的字段名，雖然我也不想弄一堆type...汗）

var root = 20543;
   //初始化产品树
   function InitProductTreeGrid(rootid) {
    var type = &#39;<%=Controler.ProductType%>&#39;;
   var ishowPack = true;
   var ishowMirro = true;
   //1,包库；2，镜像
   if (type == &#39;1&#39;) {
    ishowPack = false;
    ishowMirro = true;
   } else {
    ishowPack = true;
    ishowMirro = false;
   };
   $(&#39;#tt_Product&#39;).treegrid({
    url: &#39;../Handlers/Contract_ProductHandler.ashx&#39;,
    queryParams: {
     handlertype: "InitProductTreeGrid",
     ContractId: $(&#39;#ContractId&#39;).val(),
     CatalogId: rootid,
     pindex: $(&#39;#pindex&#39;).val()
    },
    idField: &#39;id&#39;,
    width: 930,
    treeField: &#39;CatalogName&#39;,
    fitColumns: true, //宽度自适应窗口
    rownumbers: false, //是否加行号
    singleSelect: true,
    scrollbarSize: 0,  //去除滚动条，否则右边最后一列会自动多处一块
    columns: [[
     { title: &#39;产品列表&#39;, field: &#39;CatalogName&#39;, width: 210 },
     { title: &#39;产品ID&#39;, field: &#39;CatalogId&#39;, hidden: true },
     { title: &#39;父产品ID&#39;, field: &#39;ParentId&#39;, hidden: true },
     { title: &#39;父产品名称&#39;, field: &#39;ParentName&#39;, hidden: true },
     { title: &#39;产品类型&#39;, field: &#39;ProductType&#39;, hidden: true },
     { title: &#39;是否为子节点&#39;, field: &#39;isLeaf&#39;, hidden: true }, //备注：(1,是;0,否)
     { title: &#39;是否为父节点&#39;, field: &#39;isParent&#39;, hidden: true },
     { title: &#39;IsChecked&#39;, field: &#39;IsCheck&#39;, hidden: true },
     { title: &#39;CurrentYearPrices&#39;, field: &#39;type1&#39;, hidden: true },
     { title: &#39;MirrorCurrentYearPrices&#39;, field: &#39;type3&#39;, hidden: true },
     { title: &#39;MirrorEarlyPrices&#39;, field: &#39;type4&#39;, hidden: true },
     { title: &#39;MirrorPrevious3YearPrices&#39;, field: &#39;type5&#39;, hidden: true },
     {
      field: &#39;CurrentYearPrices&#39;, title: &#39;当前价格&#39;, width: 200, hidden: ishowPack,
      formatter: function (value, rec, index) {
       var d = &#39;<input type="checkbox" name="CurrentYearPrices" catalogid="&#39; + rec.CatalogId + &#39;" &#39; + (rec.type1 == &#39;True&#39; ? &#39;checked="checked"&#39; : &#39;&#39;) + &#39; id="CurrentYearPrices&#39; + rec.CatalogId + &#39;" onclick="showProductTree(this,\&#39;CurrentYearPrices\&#39;,&#39; + rec.CatalogId + &#39;,&#39; + rec.isParent + &#39;);" parent="CurrentYearPrices&#39; + rec.ParentId + &#39;" isparent="&#39; + rec.isParent + &#39;" value="&#39; + value + &#39;" />  &#39; + (value != 0 ? value.substr(0, value.length - 2) : &#39;0.00&#39;);

       return d;
      }
     },
     {
      field: &#39;MirrorCurrentYearPrices&#39;, title: &#39;当前价格&#39;, width: 200, hidden: ishowMirro,
      formatter: function (value, rec, index) {
       var d = &#39;<input type="checkbox" name="MirrorCurrentYearPrices" catalogid="&#39; + rec.CatalogId + &#39;" &#39; + (rec.type3 == &#39;True&#39; ? &#39;checked="checked"&#39; : &#39;&#39;) + &#39; id="MirrorCurrentYearPrices&#39; + rec.CatalogId + &#39;" onclick="showProductTree(this,\&#39;MirrorCurrentYearPrices\&#39;,&#39; + rec.CatalogId + &#39;,&#39; + rec.isParent + &#39;);" parent="MirrorCurrentYearPrices&#39; + rec.ParentId + &#39;" isparent="&#39; + rec.isParent + &#39;" value="&#39; + value + &#39;" />  &#39; + value.substr(0, value.length - 2);
       //var d = &#39;<span name="CurrentYearMirrorPrice" id="CurrentYearMirrorPrice&#39; + rec.CatalogId + &#39;" class="tree-checkbox tree-checkbox0">&#39; + value + &#39;</span>&#39;;
       return d;
      }
     },
     {
      field: &#39;MirrorPrevious3YearPrices&#39;, title: &#39;前阶段价格&#39;, width: 200, hidden: ishowMirro,
      formatter: function (value, rec, index) {
       var d = &#39;<input type="checkbox" name="MirrorPrevious3YearPrices" catalogid="&#39; + rec.CatalogId + &#39;" &#39; + (rec.type5 == &#39;True&#39; ? &#39;checked="checked"&#39; : &#39;&#39;) + &#39; id="MirrorPrevious3YearPrices&#39; + rec.CatalogId + &#39;" onclick="showProductTree(this,\&#39;MirrorPrevious3YearPrices\&#39;,&#39; + rec.CatalogId + &#39;,&#39; + rec.isParent + &#39;);" parent="MirrorPrevious3YearPrices&#39; + rec.ParentId + &#39;" isparent="&#39; + rec.isParent + &#39;" value="&#39; + value + &#39;" />  &#39; + value.substr(0, value.length - 2);
       return d;
      }
     },
     {
      field: &#39;MirrorEarlyPrices&#39;, title: &#39;早期价格&#39;, width: 200, hidden: ishowMirro,
      formatter: function (value, rec, index) {
       var d = &#39;<input type="checkbox" name="MirrorEarlyPrices" catalogid="&#39; + rec.CatalogId + &#39;" &#39; + (rec.type4 == &#39;True&#39; ? &#39;checked="checked"&#39; : &#39;&#39;) + &#39; id="MirrorEarlyPrices&#39; + rec.CatalogId + &#39;" onclick="showProductTree(this,\&#39;MirrorEarlyPrices\&#39;,&#39; + rec.CatalogId + &#39;,&#39; + rec.isParent + &#39;);" parent="MirrorEarlyPrices&#39; + rec.ParentId + &#39;" isparent="&#39; + rec.isParent + &#39;" value="&#39; + value + &#39;" />  &#39; + value.substr(0, value.length - 2);
       return d;
      }
     },
     {
      field: &#39;type0&#39;, title: &#39;是否赠送&#39;, width: 200,
      formatter: function (value, rec, index) {
       //alert(rec.isPresent);
       var d = &#39;<input type="checkbox" name="IsPresent" catalogid="&#39; + rec.CatalogId + &#39;" &#39; + (rec.type0 == &#39;True&#39; ? &#39;checked="checked"&#39; : &#39;&#39;) + &#39; id="IsPresent&#39; + rec.CatalogId + &#39;" onclick="showProductTree(this,\&#39;IsPresent\&#39;,&#39; + rec.CatalogId + &#39;,&#39; + rec.isParent + &#39;);" parent="IsPresent&#39; + rec.ParentId + &#39;" isparent="&#39; + rec.isParent + &#39;" value="0" />  &#39;;
       return d;
      }
     }
    ]],
    loadFilter: function (data, parentId) {
     //逐层加载
     function setData() {
      var todo = [];
      for (var i = 0; i < data.length; i++) {
       todo.push(data[i]);
      }
      while (todo.length) {
       var node = todo.shift();
       if (node.children) {
        node.state = &#39;closed&#39;;
        node.children1 = node.children;
        node.children = undefined;
        todo = todo.concat(node.children1);
       }
      }
     }
     setData(data);
     var tg = $(this);
     var opts = tg.treegrid(&#39;options&#39;);
     opts.onBeforeExpand = function (row) {
      if (row.children1) {
       tg.treegrid(&#39;append&#39;, {
        parent: row[opts.idField],
        data: row.children1
       });
       row.children1 = undefined;
       tg.treegrid(&#39;expand&#39;, row[opts.idField]);
      }
      return row.children1 == undefined;
     };
     return data;
    },
    onLoadSuccess: function (row, data) {
     //alert(data[0].CatalogId)
     RelativeTreeGridCheck();
    }
   });
  };

2，onLoadSuccess中的RelativeTreeGridCheck()級聯方法

##

var parentcid;
  var ispid;
  var tempid;
  //父节点选中关联子节点选中
  function RelativeTreeGridCheck() {
   var rows = $('#addProductTbl').find('.datagrid-view2 .datagrid-body .datagrid-btable tr');
   for (var i = 0; i < rows.length; i++) {
    if ($(rows).eq(i).attr(&#39;node-id&#39;) != undefined) {
     parentcid = "";
     ispid = -1;
     tempid = "";
     catalogid = $(rows).eq(i).attr(&#39;node-id&#39;);
     //alert(catalogid);
     var cols = $(rows).eq(i).find(&#39;td&#39;);
     var fields = &#39;&#39;;
     for (var j = 0; j < cols.length; j++) {
      fields = $(cols).eq(j).attr(&#39;field&#39;);
      //alert(&#39;fields:&#39; + fields);
      switch (fields) {
       case &#39;CurrentYearPrices&#39;:
       case &#39;MirrorCurrentYearPrices&#39;:
       case &#39;MirrorPrevious3YearPrices&#39;:
       case &#39;MirrorEarlyPrices&#39;:
       case &#39;type0&#39;:
        if ($(cols).eq(j).find(&#39;p input:checked&#39;).length > 0) {
         parentcid = $(cols).eq(j).parent().find("td[field=&#39;CatalogId&#39;]").find(&#39;p&#39;).html();
         ispid = $(cols).eq(j).parent().find("td[field=&#39;isParent&#39;]").find(&#39;p&#39;).html();
         contractproducttype = $(cols).eq(j).find(&#39;p input&#39;).attr(&#39;name&#39;);
         if (ispid == &#39;1&#39;) {
          //获取checkbox对象
          var obj = $(cols).eq(j).find(&#39;p input:checkbox&#39;);
          //如果父节点选中，自己点也连带选中
          showProductTree(obj, contractproducttype, parentcid, ispid)
         }
        }
        break;
      }
     }
    }
   }
  }
function showProductTree(obj, catalogtype, id, isparent) {
   //alert(id.indexof(&#39;2&#39;));
   if (isparent == 1) {
    //当前节点下包库子节点
    //alert(&#39;$(obj).attr(checked)&#39; + $(obj).attr(&#39;checked&#39;));
    var state = $(obj).attr(&#39;checked&#39;) == undefined ? false : true;
    //alert(&#39;state:&#39;+state+&#39; id:&#39;+id);
    //找出子节点
    var nodes = $(&#39;input[name="&#39; + catalogtype + &#39;"][parent="&#39; + catalogtype + id + &#39;"]&#39;);
    nodes.each(function () {
     //alert(&#39;$(this).attr(checked):&#39; + $(this).attr(&#39;checked&#39;));
     var curobjstate = $(this).attr(&#39;checked&#39;) == undefined ? false : true;
     disabledOthersCatalogType($(this), state, catalogtype)
     //alert(&#39;curobjstate:&#39; + curobjstate + &#39; state:&#39; + state + &#39; id:&#39; + id + &#39; isparent: &#39; + $(this).attr(&#39;isparent&#39;));
     if (curobjstate == state && $(this).attr(&#39;isparent&#39;) == &#39;0&#39;) {
      //alert(&#39;leaf&#39;);
      //如果当前节点的选中状态和父节点不同，并且当前节点不是父节点
      $(this).attr(&#39;checked&#39;, state);
      $(this).prop(&#39;checked&#39;, state);
     } else {
      //alert(&#39;$(this).attr(catalogid)&#39; + $(this).attr(&#39;catalogid&#39;) + &#39;---$(this).attr(isparent)&#39; + $(this).attr(&#39;isparent&#39;));
      $(this).attr(&#39;checked&#39;, state);
      $(this).prop(&#39;checked&#39;, state);
      showProductTree($(this), catalogtype, $(this).attr(&#39;catalogid&#39;), $(this).attr(&#39;isparent&#39;))
     }
     if (state) {
      $(this).removeAttr(&#39;disabled&#39;);
     }
    });
    $(obj).prop(&#39;checked&#39;, state);
    disabledOthersCatalogType($(obj), state, catalogtype)
   } else {
    var state = $(obj).attr(&#39;checked&#39;) == undefined ? false : true;
    //alert(state);
    //alert(catalogtype);
    disabledOthersCatalogType($(obj), state, catalogtype)
    updateParentNodeCheckState($(obj), state, catalogtype)
   }
  }
  //修改其他产品类型的checkbox的只读状态
  function disabledOthersCatalogType(obj, state, catalogtype) {
   $(&#39;input[catalogid="&#39; + $(obj).attr(&#39;catalogid&#39;) + &#39;"]&#39;).each(function () {
    if ($(this).attr(&#39;name&#39;) != catalogtype) {
     if (state) {
      $(this).attr(&#39;disabled&#39;, &#39;disabled&#39;);
     } else {
      $(this).removeAttr(&#39;disabled&#39;);
     }
     $(this).attr(&#39;checked&#39;, false).prop(&#39;checked&#39;, false);
    }
   });
  }
  //查找上一层节点,修改其状态
  function updateParentNodeCheckState(obj, state, catalogtype) {
   var pid = $(obj).attr(&#39;parent&#39;);
   //如果父节点是根节点，则不再执行
   if (pid == catalogtype + root || $(&#39;#&#39; + pid).length == 0) return;
   var parent = $(&#39;#&#39; + pid);
   if (!state) {
    //取消父节点的选中状态
    parent.attr(&#39;checked&#39;, false)
    parent.prop(&#39;checked&#39;, false)
   } else {
    //alert(&#39;pid:&#39;+pid+&#39;---&#39;+$(&#39;input[parent="&#39; + pid + &#39;"]:checked&#39;).length+&#39;------&#39;+$(&#39;input[parent="&#39; + pid + &#39;"]&#39;).length);
    //alert(&#39;checkedLen:&#39; + $(&#39;input[parent="&#39; + pid + &#39;"]:checked&#39;).length + &#39; len:&#39; + $(&#39;input[parent="&#39; + pid + &#39;"]&#39;).length);
    //子节点全部选中
    if ($(&#39;input[parent="&#39; + pid + &#39;"]:checked&#39;).length == $(&#39;input[parent="&#39; + pid + &#39;"]&#39;).length) {
     parent.attr(&#39;checked&#39;, true);
     parent.prop(&#39;checked&#39;, true);
    }
   }
   //修改其他产品类型的checkbox的只读状态
   disabledOthersCatalogType(parent, state, catalogtype)
   //继续查找上一层节点
   updateParentNodeCheckState(parent, state, catalogtype)
  }

3，由於是拼接比較繁雜，在此順便再說一下傳參代碼

//新增产品单击操作处理
  function subAddProduct() { 5    var strJson = '';
   var selectedvalued = $('#cbo_selFirstCombbox').combobox('getValue');
   //下拉框选中的value
   selectedvalued = selectedvalued == '' ? '20544' : selectedvalued;
   //
   var ids = ''; 
   var rows = $('#addProductTbl').find('.datagrid-view2 .datagrid-body .datagrid-btable tr');
   strJson += "[";
   for (var i = 0; i < rows.length; i++) {
    catalogid = -1;
    catalogname = &#39;&#39;;
    productfather = -1;
    contractproducttype = &#39;&#39;;
    quoteprice = -1;
    isfather = -1;
    productfathername = &#39;&#39;;
    if ($(rows).eq(i).attr(&#39;node-id&#39;) != undefined) {
     catalogid = $(rows).eq(i).attr(&#39;node-id&#39;);
     //alert(catalogid);
     var cols = $(rows).eq(i).find(&#39;td&#39;);
     var fields = &#39;&#39;;
     for (var j = 0; j < cols.length; j++) {
      fields = $(cols).eq(j).attr(&#39;field&#39;);
      //alert(&#39;fields:&#39; + fields);
      switch (fields) {
       case &#39;CatalogName&#39;:
        $(cols).eq(j).find(&#39;p span&#39;).each(function (index) {
         if ($(cols).eq(j).find(&#39;p span&#39;).eq(index).hasClass(&#39;tree-title&#39;)) {
          catalogname = $(cols).eq(j).find(&#39;p span&#39;).eq(index).html();
         }
        });
        //alert(catalogname);
        break;
       case &#39;ParentId&#39;:
        productfather = $(cols).eq(j).find(&#39;p&#39;).html();
        break;
       case &#39;IsCheck&#39;:
        //原树选中节点id的获取(不包含修改的id节点)，此步骤目的是为了配合后台方法，作用是先删除当前版本下所有树选中的节点，再获取页面中修改后的
        //节点，进行更新操作
        var oldcheck = $(cols).eq(j).find(&#39;p&#39;).html();
        if (oldcheck == &#39;True&#39;) {
         var cid = $(cols).eq(j).parent().find("td[field=&#39;CatalogId&#39;]").find(&#39;p&#39;).html();
         ids += cid + &#39;,&#39;;
         //alert(ids)
        }
        break;
       case &#39;CurrentYearPrices&#39;:
       case &#39;MirrorCurrentYearPrices&#39;:
       case &#39;MirrorPrevious3YearPrices&#39;:
       case &#39;MirrorEarlyPrices&#39;:
       case &#39;type0&#39;:
        if ($(cols).eq(j).find(&#39;p input:checked&#39;).length > 0) {
         isfather = $(cols).eq(j).parent().find("td[field=&#39;isParent&#39;]").find(&#39;p&#39;).html();
         productfathername = $(cols).eq(j).parent().find("td[field=&#39;ParentName&#39;]").find(&#39;p&#39;).html();
         contractproducttype = $(cols).eq(j).find(&#39;p input&#39;).attr(&#39;name&#39;);
         if (contractproducttype == &#39;IsPresent&#39;) {
          var type = &#39;<%=Controler.ProductType%>&#39;;
           contractproducttype = type == &#39;1&#39; ? &#39;CurrentYearPrices&#39; : &#39;MirrorCurrentYearPrices&#39;; //如果类型为镜像，则默认为镜像当年
          //alert($(cols).eq(j).parent().find("td[field=&#39;" + contractproducttype + "&#39;]").find(&#39;p input&#39;).val());
          //quoteprice = 0;
           quoteprice = $(cols).eq(j).parent().find("td[field=&#39;" + contractproducttype + "&#39;]").find(&#39;p input&#39;).val();
           ispresent = 1;
          } else {
           quoteprice = $(cols).eq(j).find(&#39;p input&#39;).val();
           ispresent = 0;
          }
         //alert(&#39;name:&#39; + $(cols).eq(j).find(&#39;p input&#39;).attr(&#39;name&#39;) + &#39; value:&#39; + $(cols).eq(j).find(&#39;p input&#39;).val());
         }
         break;
       }
      }
     //alert(&#39;catalogid:&#39; + catalogid + &#39;--catalogname:&#39; + catalogname + &#39;--productfather:&#39; + productfather + &#39;--contractproducttype:&#39; + contractproducttype + &#39;--quoteprice:&#39; + quoteprice);
      if (catalogid != -1 && catalogname != &#39;&#39; && productfather != -1 && contractproducttype != &#39;&#39; && quoteprice != -1 && productfathername != &#39;&#39;) {
       strJson += "{\"ProductID\":\"" + catalogid + "\",\"ContractProductType\":\"" + contractproducttype + "\",\"ProductFather\":\"" + productfather + "\",\"Productname\":\"" + catalogname + "\",\"Quotedprice\":\"" + quoteprice + "\",\"Oldproduct\":\"" + oldproduct + "\",\"IsPresent\":\"" + ispresent + "\",\"ContractID\":\"" + $(&#39;#ContractId&#39;).val() + "\",\"SelectedID\":\"" + selectedvalued + "\",\"IsParent\":\"" + isfather + "\",\"ProductFatherName\":\"" + productfathername + "\",\"IsNull\":\"0\"},";
      }
     }
    }
   //alert(strJson);
    if (strJson == &#39;[&#39;) {
     strJson = "[{\"ContractID\":\"" + $(&#39;#ContractId&#39;).val() + "\",\"SelectedID\":\"" + selectedvalued + "\",\"IsNull\":\"1\"}]";
    } else {
     strJson = strJson.substr(0, strJson.length - 1);
     strJson += "]";
    }
    ids = ids.substr(0, ids.length - 1);
    subProduct(strJson, ids);
   //alert(rows.length);
   }
   //新增产品提交操作
   function subProduct(strJson, ids) {
    $.post(&#39;../Handlers/Contract_ProductHandler.ashx&#39;, { &#39;handlertype&#39;: &#39;subAddProduct&#39;, &#39;strJson&#39;: strJson, &#39;ids&#39;: ids, &#39;pindex&#39;: $(&#39;#pindex&#39;).val() }, function (responseData) {121      switch (responseData.Status) {
      case "success":
       //成功的操作
       $.messager.alert(&#39;提示&#39;, responseData.Msg);
       $(&#39;#ProductWinTree&#39;).window(&#39;close&#39;);
       //$(&#39;#selFirstCombbox&#39;).val(&#39;6774&#39;);
       $(&#39;#dg_Product&#39;).datagrid(&#39;reload&#39;);
       break;
      case "failed":
       //失败的操作
       $.messager.alert(&#39;提示&#39;, responseData.Msg);
       break;
     }
    }, &#39;json&#39;);
   }

總結

以上是關於jQuery Easyui Treegrid如何實作顯示checkbox功能的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！