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 实现双击编辑表格功能
Jun 19 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
jquery实现聊天机器人
Feb 08 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 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
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
Python抽象类的新写法
2015/06/18 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
python保存网页图片到本地的方法
2018/07/24 Python
python读取各种文件数据方法解析
2018/12/29 Python
python3图片文件批量重命名处理
2019/10/31 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
构建高效课堂实施方案
2014/03/13 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
2014年施工员工作总结
2014/11/18 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
2015年药品销售工作总结范文
2015/05/25 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript