easyui(1)——treegrid
1.非编辑状态下,依旧显示checkbox,使用formatter实现:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | { field: "IsSecret", title: "是否XX", width: 100, align: 'center', formatter: function (value, row, index) { if (row.LS_Parent_Id == 'P') {//根据字段值判断是否为子节点 var tt = "< input type=\"checkbox\" value=\""+value + "\""; if (value == "Y") { tt += " checked=\"checked\" "; } tt+=" disabled >"; return tt; } else { return ""; } } }, |
2.选中某行父节点,自动展开,其它折叠:
1 2 3 4 5 6 | ,onSelect: function (row) { if (row.LS_Parent_Id == 'P') { $('#Tab_COO_HD').treegrid('collapseAll'); $('#Tab_COO_HD').treegrid('expand', row.S_Id); } } |
3.treegrid翻页有点问题,修改一下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | function loadTree(page, rows) {//页码 每页行数 var param = {}; param.flag = new Date(); if (page == -1 && rows == -1) { var options = $("#Tab_COO_HD").treegrid("options"); param.page = options.pageNumber; param.rows = options.pageSize; } else { param.page = page; param.rows = rows; } param.dir = dir;//存放了一个查询字段 var url = XXXXXXX; $.post(url, param, function (data) { $('#Tab_COO_HD').treegrid('loadData', data); $("#Tab_COO_HD").treegrid('getPager').pagination("loaded"); $("#Tab_COO_HD").treegrid("loaded"); }, 'json'); } |
应用:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | //翻页设置 $("#Tab_COO_HD").treegrid('getPager').pagination({ onSelectPage: function (pageNumber, pageSize) { loadTree(pageNumber, pageSize); //分页控件上的所有对分页相关的事件,只要这个就好了 } }); //查询设置,得出一个结果查询好几遍,待完善 function query() { var options = $("#Tab_COO_HD").treegrid('getPager').data("pagination").options; var curr = options.pageNumber; //获得当前页 var currsize = options.pageSize;//获取当前页设置的行数 dir = $(XX).val();//查询条件 var url = "XXX.ashx?method=XXX&dir=" + dir + "&page=1&rows=10&tmp=" + new Date().getTime(); $.post(url, {}, function (data) { var d1 = data.total;//获取条数 var d2 = JSON.stringify(data); var d = data;//返回json格式结果 if (d1 == "0") { $('#Tab_COO_HD').treegrid('loadData', []);//数据 $("#Tab_COO_HD").treegrid('getPager').pagination("loaded"); $('#Tab_COO_HD').datagrid('loadData', { total: 0, rows: [] });//footer } else { $('#Tab_COO_HD').treegrid('load', { dir: dir }); loadTree(1, currsize); } }, 'json'); editingId = null;//编辑状态下的查询 } |
4.扩展treegrid的事件,为其添加和移除编辑器:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | $.extend($.fn.treegrid.methods, { addEditor: function (jq, param) { if (param instanceof Array) { $.each(param, function (index, item) { var e = $(jq).datagrid('getColumnOption', item.field); e.editor = item.editor; }); } else { var e = $(jq).datagrid('getColumnOption', param.field); e.editor = param.editor; } }, removeEditor: function (jq, param) { if (param instanceof Array) { $.each(param, function (index, item) { var e = $(jq).datagrid('getColumnOption', item); e.editor = {}; }); } else { var e = $(jq).datagrid('getColumnOption', param); e.editor = {}; } } }); |
应用:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $("#Tab_COO_HD").treegrid('removeEditor', 列名);//移除 $("#Tab_COO_HD").treegrid('addEditor', [{//增加 field: 列名, editor: { type: 'combobox', options: { valueField: 'label', textField: 'value', required: true, hasDownArrow: true, editable: false, data: [{ label: '111', value: '111' } , { label: '222', value: '222' }] } } }]); |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步