jQuery Easyui Treegrid实现显示checkbox功能

下面通过本文给大家介绍下图中的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 + '" />&nbsp;&nbsp;' + (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 + '" />&nbsp;&nbsp;' + 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 + '" />&nbsp;&nbsp;' + 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 + '" />&nbsp;&nbsp;' + 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" />&nbsp;&nbsp;';
       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功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# easyui  # treegrid  # checkbox  # Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法  # 镜像  # 勾选  # 在此  # 给大家  # 行号  # 产品类型  # 小编  # 上一层  # 复选框  # 加载  # 级联  # 是由  # 有所不同  # 有几个  # 所述  # 多处  # 给我留言  # 图中  # 单击  # 我也不想 

相关文章： 广德云建站网站建设方案与建站流程优化指南  免费制作统计图的网站有哪些,如何看待现如今年轻人买房难的情况？  制作表格网站有哪些,线上表格怎么弄？  打鱼网站制作软件,波克捕鱼官方号怎么注册？  制作网站的软件免费下载,免费制作app哪个平台好？  如何快速搭建高效WAP手机网站吸引移动用户？  制作营销网站公司,淘特是干什么用的？  建站之星如何取消后台验证码生成？  如何正确选择百度移动适配建站域名？  宁波免费建站如何选择可靠模板与平台？  网站制作软件有哪些,制图软件有哪些？  公司网站制作费用多少,为公司建立一个网站需要哪些费用？  香港服务器如何优化才能显著提升网站加载速度？  建站主机数据库如何配置才能提升网站性能？  如何选择高性价比服务器搭建个人网站？  MySQL查询结果复制到新表的方法(更新、插入)  如何在西部数码注册域名并快速搭建网站？  教育培训网站制作流程,请问edu教育网站的域名怎么申请？  电商网站制作多少钱一个,电子商务公司的网站制作费用计入什么科目？  唐山网站制作公司有哪些,唐山找工作哪个网站最靠谱？  香港服务器租用每月最低只需15元？  如何在七牛云存储上搭建网站并设置自定义域名？  制作网站的公司有哪些,做一个公司网站要多少钱？  如何做静态网页,sublimetext3.0制作静态网页？  自助网站制作软件,个人如何自助建网站？  如何在万网自助建站平台快速创建网站？  制作假网页,招聘网的薪资待遇，会有靠谱的吗？一面试又各种折扣？  黑客如何通过漏洞一步步攻陷网站服务器？  如何在IIS服务器上快速部署高效网站？  建站之星代理商如何保障技术支持与售后服务？  制作销售网站教学视频,销售网站有哪些？  建站之星如何快速生成多端适配网站？  网站制作免费,什么网站能看正片电影？  图册素材网站设计制作软件,图册的导出方式有几种？  韩国代理服务器如何选？解析IP设置技巧与跨境访问优化指南  c++怎么实现高并发下的无锁队列_c++ std::atomic原子变量与CAS操作【详解】  招商网站制作流程,网站招商广告语？  实惠建站价格推荐：2025年高性价比自助建站套餐解析  如何制作网站标识牌,动态网站如何制作（教程）？  建站之星免费版是否永久可用？  如何快速辨别茅台真假？关键步骤解析  如何基于云服务器快速搭建个人网站？  如何通过西部数码建站助手快速创建专业网站？  网站制作需要会哪些技术,建立一个网站要花费多少？  如何快速使用云服务器搭建个人网站？  外贸公司网站制作哪家好,maersk船公司官网？  如何用VPS主机快速搭建个人网站？  javascript中对象的定义、使用以及对象和原型链操作小结  c# 在高并发场景下，委托和接口调用的性能对比  个人摄影网站制作流程,摄影爱好者都去什么网站？