下面通过本文给大家介绍下图中的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并取选定值的方法  # 镜像  # 勾选  # 在此  # 给大家  # 行号  # 产品类型  # 小编  # 上一层  # 复选框  # 加载  # 级联  # 是由  # 有所不同  # 有几个  # 所述  # 多处  # 给我留言  # 图中  # 单击  # 我也不想 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 打开php文件提示内存不足_怎么调整php内存限制【解决方案】  Laravel如何使用Guzzle调用外部接口_Laravel发起HTTP请求与JSON数据解析【详解】  php在windows下怎么调试_phpwindows环境调试操作说明【操作】  Laravel如何连接多个数据库_Laravel多数据库连接配置与切换教程  桂林网站制作公司有哪些,桂林马拉松怎么报名？  Python并发异常传播_错误处理解析【教程】  通义万相免费版怎么用_通义万相免费版使用方法详细指南【教程】  HTML5空格在Angular项目里怎么处理_Angular中空格的渲染问题【详解】  免费的流程图制作网站有哪些,2025年教师初级职称申报网上流程？  焦点电影公司作品,电影焦点结局是什么？  香港服务器网站推广：SEO优化与外贸独立站搭建策略  Laravel如何使用Sanctum进行API认证？（SPA实战）  Laravel Eloquent关联是什么_Laravel模型一对一与一对多关系精讲  简单实现jsp分页  Laravel如何集成第三方登录_Laravel Socialite实现微信QQ微博登录  如何在云主机上快速搭建网站？  Linux安全能力提升路径_长期防护思维说明【指导】  大型企业网站制作流程,做网站需要注册公司吗？  ,网页ppt怎么弄成自己的ppt？  Laravel如何与Inertia.js和Vue/React构建现代单页应用  Laravel怎么实现软删除SoftDeletes_Laravel模型回收站功能与数据恢复【步骤】  node.js报错：Cannot find module 'ejs'的解决办法  Laravel如何实现文件上传和存储？（本地与S3配置）  如何用AWS免费套餐快速搭建高效网站？  如何在Windows服务器上快速搭建网站？  微信小程序 HTTPS报错整理常见问题及解决方案  Laravel如何使用Gate和Policy进行授权？（权限控制）  Laravel怎么导出Excel文件_Laravel Excel插件使用教程  java中使用zxing批量生成二维码立牌  关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)  googleplay官方入口在哪里_Google Play官方商店快速入口指南  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  最好的网站制作公司,网购哪个网站口碑最好，推荐几个？谢谢？  Laravel如何实现事件和监听器？（Event & Listener实战）  Laravel如何监控和管理失败的队列任务_Laravel失败任务处理与监控  Laravel如何处理和验证JSON类型的数据库字段  Laravel如何处理跨站请求伪造（CSRF）保护_Laravel表单安全机制与令牌校验  佐糖AI抠图怎样调整抠图精度_佐糖AI精度调整与放大细化操作【攻略】  如何在HTML表单中获取用户输入并用JavaScript动态控制复利计算循环  Laravel如何使用Facades（门面）及其工作原理_Laravel门面模式与底层机制  如何在 Go 中优雅地映射具有动态字段的 JSON 对象到结构体  Win11任务栏卡死怎么办 Windows11任务栏无反应解决方法【教程】  Python制作简易注册登录系统  如何确保西部建站助手FTP传输的安全性？  米侠浏览器网页背景异常怎么办 米侠显示修复  Laravel的路由模型绑定怎么用_Laravel Route Model Binding简化控制器逻辑  nginx修改上传文件大小限制的方法  jQuery validate插件功能与用法详解  高防服务器如何保障网站安全无虞？  Zeus浏览器网页版官网入口 宙斯浏览器官网在线通道