jQuery Easyui Treegrid實現顯示checkbox功能，jqueryeasyui

jQuery Easyui Treegrid實現顯示checkbox功能，jqueryeasyui

下面通過本文給大家介紹中的treegrid如何?？

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

下面是具體代碼：

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

var root = 20543;   //初始化產品樹   function InitProductTreeGrid(rootid) {    var type = '<%=Controler.ProductType%>';   var ishowPack = true;   var ishowMirro = true;   //1,包庫；2，鏡像   if (type == '1') {    ishowPack = false;    ishowMirro = true;   } else {    ishowPack = true;    ishowMirro = false;   };   $('#tt_Product').treegrid({    url: '../Handlers/Contract_ProductHandler.ashx',    queryParams: {     handlertype: "InitProductTreeGrid",     ContractId: $('#ContractId').val(),     CatalogId: rootid,     pindex: $('#pindex').val()    },    idField: 'id',    width: 930,    treeField: 'CatalogName',    fitColumns: true, //寬度自適應視窗    rownumbers: false, //是否加行號    singleSelect: true,    scrollbarSize: 0,  //去除捲軸，否則右邊最後一列會自動多處一塊    columns: [[     { title: '產品列表', field: 'CatalogName', width: 210 },     { title: '產品ID', field: 'CatalogId', hidden: true },     { title: '父產品ID', field: 'ParentId', hidden: true },     { title: '父產品名稱', field: 'ParentName', hidden: true },     { title: '產品類型', field: 'ProductType', hidden: true },     { title: '是否為子節點', field: 'isLeaf', hidden: true }, //備忘：(1,是;0,否)     { title: '是否為父節點', field: 'isParent', hidden: true },     { title: 'IsChecked', field: 'IsCheck', hidden: true },     { title: 'CurrentYearPrices', field: 'type1', hidden: true },     { title: 'MirrorCurrentYearPrices', field: 'type3', hidden: true },     { title: 'MirrorEarlyPrices', field: 'type4', hidden: true },     { title: 'MirrorPrevious3YearPrices', field: 'type5', hidden: true },     {      field: 'CurrentYearPrices', title: '當前價格', width: 200, hidden: ishowPack,      formatter: function (value, rec, index) {       var d = '<input type="checkbox" name="CurrentYearPrices" catalogid="' + rec.CatalogId + '" ' + (rec.type1 == 'True' ? 'checked="checked"' : '') + ' id="CurrentYearPrices' + rec.CatalogId + '" onclick="showProductTree(this,\'CurrentYearPrices\',' + rec.CatalogId + ',' + rec.isParent + ');" parent="CurrentYearPrices' + rec.ParentId + '" isparent="' + rec.isParent + '" value="' + value + '" />  ' + (value != 0 ? value.substr(0, value.length - 2) : '0.00');       return d;      }     },     {      field: 'MirrorCurrentYearPrices', title: '當前價格', width: 200, hidden: ishowMirro,      formatter: function (value, rec, index) {       var d = '<input type="checkbox" name="MirrorCurrentYearPrices" catalogid="' + rec.CatalogId + '" ' + (rec.type3 == 'True' ? 'checked="checked"' : '') + ' id="MirrorCurrentYearPrices' + rec.CatalogId + '" onclick="showProductTree(this,\'MirrorCurrentYearPrices\',' + rec.CatalogId + ',' + rec.isParent + ');" parent="MirrorCurrentYearPrices' + rec.ParentId + '" isparent="' + rec.isParent + '" value="' + value + '" />  ' + value.substr(0, value.length - 2);       //var d = '<span name="CurrentYearMirrorPrice" id="CurrentYearMirrorPrice' + rec.CatalogId + '" class="tree-checkbox tree-checkbox0">' + value + '</span>';       return d;      }     },     {      field: 'MirrorPrevious3YearPrices', title: '前階段價格', width: 200, hidden: ishowMirro,      formatter: function (value, rec, index) {       var d = '<input type="checkbox" name="MirrorPrevious3YearPrices" catalogid="' + rec.CatalogId + '" ' + (rec.type5 == 'True' ? 'checked="checked"' : '') + ' id="MirrorPrevious3YearPrices' + rec.CatalogId + '" onclick="showProductTree(this,\'MirrorPrevious3YearPrices\',' + rec.CatalogId + ',' + rec.isParent + ');" parent="MirrorPrevious3YearPrices' + rec.ParentId + '" isparent="' + rec.isParent + '" value="' + value + '" />  ' + value.substr(0, value.length - 2);       return d;      }     },     {      field: 'MirrorEarlyPrices', title: '早期價格', width: 200, hidden: ishowMirro,      formatter: function (value, rec, index) {       var d = '<input type="checkbox" name="MirrorEarlyPrices" catalogid="' + rec.CatalogId + '" ' + (rec.type4 == 'True' ? 'checked="checked"' : '') + ' id="MirrorEarlyPrices' + rec.CatalogId + '" onclick="showProductTree(this,\'MirrorEarlyPrices\',' + rec.CatalogId + ',' + rec.isParent + ');" parent="MirrorEarlyPrices' + rec.ParentId + '" isparent="' + rec.isParent + '" value="' + value + '" />  ' + value.substr(0, value.length - 2);       return d;      }     },     {      field: 'type0', title: '是否贈送', width: 200,      formatter: function (value, rec, index) {       //alert(rec.isPresent);       var d = '<input type="checkbox" name="IsPresent" catalogid="' + rec.CatalogId + '" ' + (rec.type0 == 'True' ? 'checked="checked"' : '') + ' id="IsPresent' + rec.CatalogId + '" onclick="showProductTree(this,\'IsPresent\',' + rec.CatalogId + ',' + rec.isParent + ');" parent="IsPresent' + rec.ParentId + '" isparent="' + rec.isParent + '" value="0" />  ';       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 = 'closed';        node.children1 = node.children;        node.children = undefined;        todo = todo.concat(node.children1);       }      }     }     setData(data);     var tg = $(this);     var opts = tg.treegrid('options');     opts.onBeforeExpand = function (row) {      if (row.children1) {       tg.treegrid('append', {        parent: row[opts.idField],        data: row.children1       });       row.children1 = undefined;       tg.treegrid('expand', 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('node-id') != undefined) {     parentcid = "";     ispid = -1;     tempid = "";     catalogid = $(rows).eq(i).attr('node-id');     //alert(catalogid);     var cols = $(rows).eq(i).find('td');     var fields = '';     for (var j = 0; j < cols.length; j++) {      fields = $(cols).eq(j).attr('field');      //alert('fields:' + fields);      switch (fields) {       case 'CurrentYearPrices':       case 'MirrorCurrentYearPrices':       case 'MirrorPrevious3YearPrices':       case 'MirrorEarlyPrices':       case 'type0':        if ($(cols).eq(j).find('div input:checked').length > 0) {         parentcid = $(cols).eq(j).parent().find("td[field='CatalogId']").find('div').html();         ispid = $(cols).eq(j).parent().find("td[field='isParent']").find('div').html();         contractproducttype = $(cols).eq(j).find('div input').attr('name');         if (ispid == '1') {          //擷取checkbox對象          var obj = $(cols).eq(j).find('div input:checkbox');          //如果父節點選中，自己點也連帶選中          showProductTree(obj, contractproducttype, parentcid, ispid)         }        }        break;      }     }    }   }  }function showProductTree(obj, catalogtype, id, isparent) {   //alert(id.indexof('2'));   if (isparent == 1) {    //當前節點下包庫子節點    //alert('$(obj).attr(checked)' + $(obj).attr('checked'));    var state = $(obj).attr('checked') == undefined ? false : true;    //alert('state:'+state+' id:'+id);    //找出子節點    var nodes = $('input[name="' + catalogtype + '"][parent="' + catalogtype + id + '"]');    nodes.each(function () {     //alert('$(this).attr(checked):' + $(this).attr('checked'));     var curobjstate = $(this).attr('checked') == undefined ? false : true;     disabledOthersCatalogType($(this), state, catalogtype)     //alert('curobjstate:' + curobjstate + ' state:' + state + ' id:' + id + ' isparent: ' + $(this).attr('isparent'));     if (curobjstate == state && $(this).attr('isparent') == '0') {      //alert('leaf');      //如果當前節點的選中狀態和父節點不同，並且當前節點不是父節點      $(this).attr('checked', state);      $(this).prop('checked', state);     } else {      //alert('$(this).attr(catalogid)' + $(this).attr('catalogid') + '---$(this).attr(isparent)' + $(this).attr('isparent'));      $(this).attr('checked', state);      $(this).prop('checked', state);      showProductTree($(this), catalogtype, $(this).attr('catalogid'), $(this).attr('isparent'))     }     if (state) {      $(this).removeAttr('disabled');     }    });    $(obj).prop('checked', state);    disabledOthersCatalogType($(obj), state, catalogtype)   } else {    var state = $(obj).attr('checked') == undefined ? false : true;    //alert(state);    //alert(catalogtype);    disabledOthersCatalogType($(obj), state, catalogtype)    updateParentNodeCheckState($(obj), state, catalogtype)   }  }  //修改其他產品類型的checkbox的唯讀狀態  function disabledOthersCatalogType(obj, state, catalogtype) {   $('input[catalogid="' + $(obj).attr('catalogid') + '"]').each(function () {    if ($(this).attr('name') != catalogtype) {     if (state) {      $(this).attr('disabled', 'disabled');     } else {      $(this).removeAttr('disabled');     }     $(this).attr('checked', false).prop('checked', false);    }   });  }  //尋找上一層節點,修改其狀態  function updateParentNodeCheckState(obj, state, catalogtype) {   var pid = $(obj).attr('parent');   //如果父節點是根節點，則不再執行   if (pid == catalogtype + root || $('#' + pid).length == 0) return;   var parent = $('#' + pid);   if (!state) {    //取消父節點的選中狀態    parent.attr('checked', false)    parent.prop('checked', false)   } else {    //alert('pid:'+pid+'---'+$('input[parent="' + pid + '"]:checked').length+'------'+$('input[parent="' + pid + '"]').length);    //alert('checkedLen:' + $('input[parent="' + pid + '"]:checked').length + ' len:' + $('input[parent="' + pid + '"]').length);    //子節點全部選中    if ($('input[parent="' + pid + '"]:checked').length == $('input[parent="' + pid + '"]').length) {     parent.attr('checked', true);     parent.prop('checked', 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 = '';    productfather = -1;    contractproducttype = '';    quoteprice = -1;    isfather = -1;    productfathername = '';    if ($(rows).eq(i).attr('node-id') != undefined) {     catalogid = $(rows).eq(i).attr('node-id');     //alert(catalogid);     var cols = $(rows).eq(i).find('td');     var fields = '';     for (var j = 0; j < cols.length; j++) {      fields = $(cols).eq(j).attr('field');      //alert('fields:' + fields);      switch (fields) {       case 'CatalogName':        $(cols).eq(j).find('div span').each(function (index) {         if ($(cols).eq(j).find('div span').eq(index).hasClass('tree-title')) {          catalogname = $(cols).eq(j).find('div span').eq(index).html();         }        });        //alert(catalogname);        break;       case 'ParentId':        productfather = $(cols).eq(j).find('div').html();        break;       case 'IsCheck':        //原樹選中節點id的擷取(不包含修改的id節點)，此步驟目的是為了配合後台方法，作用是先刪除目前的版本下所有樹選中的節點，再擷取頁面中修改後的        //節點，進行更新操作        var oldcheck = $(cols).eq(j).find('div').html();        if (oldcheck == 'True') {         var cid = $(cols).eq(j).parent().find("td[field='CatalogId']").find('div').html();         ids += cid + ',';         //alert(ids)        }        break;       case 'CurrentYearPrices':       case 'MirrorCurrentYearPrices':       case 'MirrorPrevious3YearPrices':       case 'MirrorEarlyPrices':       case 'type0':        if ($(cols).eq(j).find('div input:checked').length > 0) {         isfather = $(cols).eq(j).parent().find("td[field='isParent']").find('div').html();         productfathername = $(cols).eq(j).parent().find("td[field='ParentName']").find('div').html();         contractproducttype = $(cols).eq(j).find('div input').attr('name');         if (contractproducttype == 'IsPresent') {          var type = '<%=Controler.ProductType%>';           contractproducttype = type == '1' ? 'CurrentYearPrices' : 'MirrorCurrentYearPrices'; //如果類型為鏡像，則預設為鏡像當年          //alert($(cols).eq(j).parent().find("td[field='" + contractproducttype + "']").find('div input').val());          //quoteprice = 0;           quoteprice = $(cols).eq(j).parent().find("td[field='" + contractproducttype + "']").find('div input').val();           ispresent = 1;          } else {           quoteprice = $(cols).eq(j).find('div input').val();           ispresent = 0;          }         //alert('name:' + $(cols).eq(j).find('div input').attr('name') + ' value:' + $(cols).eq(j).find('div input').val());         }         break;       }      }     //alert('catalogid:' + catalogid + '--catalogname:' + catalogname + '--productfather:' + productfather + '--contractproducttype:' + contractproducttype + '--quoteprice:' + quoteprice);      if (catalogid != -1 && catalogname != '' && productfather != -1 && contractproducttype != '' && quoteprice != -1 && productfathername != '') {       strJson += "{\"ProductID\":\"" + catalogid + "\",\"ContractProductType\":\"" + contractproducttype + "\",\"ProductFather\":\"" + productfather + "\",\"Productname\":\"" + catalogname + "\",\"Quotedprice\":\"" + quoteprice + "\",\"Oldproduct\":\"" + oldproduct + "\",\"IsPresent\":\"" + ispresent + "\",\"ContractID\":\"" + $('#ContractId').val() + "\",\"SelectedID\":\"" + selectedvalued + "\",\"IsParent\":\"" + isfather + "\",\"ProductFatherName\":\"" + productfathername + "\",\"IsNull\":\"0\"},";      }     }    }   //alert(strJson);    if (strJson == '[') {     strJson = "[{\"ContractID\":\"" + $('#ContractId').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('../Handlers/Contract_ProductHandler.ashx', { 'handlertype': 'subAddProduct', 'strJson': strJson, 'ids': ids, 'pindex': $('#pindex').val() }, function (responseData) {121      switch (responseData.Status) {      case "success":       //成功的操作       $.messager.alert('提示', responseData.Msg);       $('#ProductWinTree').window('close');       //$('#selFirstCombbox').val('6774');       $('#dg_Product').datagrid('reload');       break;      case "failed":       //失敗的操作       $.messager.alert('提示', responseData.Msg);       break;     }    }, 'json');   }

總結

以上所述是小編給大家介紹的jQuery Easyui Treegrid實現顯示checkbox功能，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！