jQuery Easyui Treegrid实现显示checkbox功能


Posted in jQuery onAugust 08, 2017

下面通过本文给大家介绍下图中的treegrid如何实现?

jQuery Easyui Treegrid实现显示checkbox功能

要求:动态加载;级联勾选;通关类型判断显示包库/还是镜像(列有所不同,镜像共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功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 #jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 #jQuery
jquery+css实现简单的图片轮播效果
Aug 07 #jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 #jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 #jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 #jQuery
jQuery实现上传图片前预览效果功能
Aug 03 #jQuery
You might like
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
php实现word转html的方法
2016/01/22 PHP
php时间计算相关问题小结
2016/05/09 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
JavaScript 继承详解(四)
2009/07/13 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
浅析JQuery UI Dialog的样式设置问题
2013/12/18 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
python实现超简单的视频对象提取功能
2018/06/04 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
Python3 元组tuple入门基础
2020/02/09 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
店长岗位职责
2013/11/21 职场文书
旅游管理专业生自荐信范文
2014/01/02 职场文书
在校大学生个人的自我评价
2014/02/13 职场文书
品质主管岗位职责
2014/03/16 职场文书
委托书格式
2014/08/01 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
鲁冰花观后感
2015/06/10 职场文书
学术会议开幕词
2016/03/03 职场文书
PyTorch device与cuda.device用法
2022/04/03 Python