easyUI折叠表格-默认展开操作-去除扩展符号（+）-清除滚轮--实例加效果图

本篇文章主要解决了一下几个问题：

1.datagrid detailview 的使用，之前做了一个4层的，可以查看链接:easyUI折叠表格层次显示detailview详解及实例

2.datagrid detailview 如何自动展开

3.datagrid detailview 如何展开行里面没有数据的时候，取消主表上的加减号

4.datagrid detailview 如何把展开行的右侧的竖滚轮清除

下边显示效果展示，看是否满足你的要求:

1.效果1,2 嵌套一层并自动展开

2.效果3，如果没有扩展行不展示加号，怕别人误解；

3.对比一下有滚轮和没滚轮的效果

存在多余注释万一你用到呢

    var datagridObj = '';var queryJobTaskInfo;$(function() {queryJobTaskInfo = $('#jobTaskInfo').datagrid({url: '${path}/JobOrderQuery/jobTaskInfo?jobId='+jobId,striped: true,rownumbers: true,pagination: true,singleSelect: true,fit: true,idField: 'ID',nowrap:false,pageSize: 10,pageList: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500],columns: [[{title: '任务编号',field: 'joTaskId',align: 'center',hidden: true},{title: '处理组',field: 'dealGroup',align: 'center'},{title: '任务时间',field: 'joTaskTime',width:80,align: 'center'},{title: '受理时间',field: 'joTaskAcceptTime',width:80,align: 'center'},{title: '回复',field: 'openRev',align: 'center',formatter: function (value, row) {var str = '';str += $.formatString('<a id="stagButton" href="javascript:void(0)" class="easyui-linkbutton-rev" data-options="plain:true" onclick="addTaskRevView(\'{0}\');" >回复</a>', row.joTaskId);return str;}}]],view: detailview, // 从此行以下就是detail View 的使用案例了detailFormatter:function(index,row){//注意2  生成子孙的divreturn '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>';},onLoadSuccess:function(data){// 加载主表后调用// $("#jobTaskInfo").datagrid("expandRow",0);// 展开第一行var row = $("#jobTaskInfo").datagrid("getRows");// 获取主表格的所有行对象for (var r = 0; r < row.length; r++){$("#jobTaskInfo").datagrid("expandRow",r);// 展开每一行 这样的效果就是默认展开所有行}datagridObj = $(this).data().datagrid.dc.body1;// 将body1对象保存下来 可以在子孙层对其操作 比如讲+号关闭// var body = $(this).data().datagrid.dc.body1; // 注释的这些是参照其他文章的 也可以不看哈 下面也应用了// var t = body.find('tr[datagrid-row-index='+0+']');// 找到指定行  0 要替换成变量哈// // t.find('span').removeClass('datagrid-row-expand').removeClass('datagrid-row-collapse');// 清除+加号// $.each(data.rows, function (index, rowdata) {//     console.log("rowdata.test:"+rowdata)//     if (!rowdata.test || rowdata.test == "") {//         console.info("----------")//         var expander = body.find('span.datagrid-row-expander[row-index=' + index + ']');//         expander.removeClass('datagrid-row-expand').removeClass('datagrid-row-collapse');//     }// });},onExpandRow:function(index,row){//注意3  展开时调用$('#ddv-'+index).datagrid({url:'${path}/JobOrderQuery/reviewInfoList?taskId='+row.joTaskId,singleSelect: true,height:'auto',nowrap:false,columns:[[{field:'id',title:'ID',hidden: true},{field:'joId',title:'工单ID',hidden: true},{field:'taskId',title:'任务ID',hidden: true},{field:'option',title:'操作',width: 70,align: 'center',formatter: function (value, row) {var str = '';str += $.formatString('<a id="stagButton" href="javascript:void(0)" class="easyui-linkbutton-rev" data-options="plain:true" onclick="delTaskRev(\'{0}\');" >删除</a>', row.id);return str;}}]],onResize:function(){$('#jobTaskInfo').datagrid('fixDetailRowHeight',index);},onLoadSuccess:function(data){// 子孙加载完成后调用// console.info("data:"+ JSON.stringify(data));// for (var i = 0; i < data.rows.length; i++) {//     console.log("log:"+JSON.stringify(data.rows[i]))// }var row = $("#jobTaskInfo").datagrid("getRows");// 获取主表格的所有行对象for (var r = 0; r < row.length; r++){// $("#jobTaskInfo").datagrid("expandRow",r); // 如果你需要人工触发一次 才展开所有行 ，可以添加这一句var ddvRow = $("#"+"ddv-"+index).datagrid("getRows");if(ddvRow.length<=0){// 如果展开行里面的没有数据$("#jobTaskInfo").datagrid("collapseRow",r);// 就把展开行关掉var t = datagridObj.find('tr[datagrid-row-index='+r+']');// 获取展开行的对象t.find('span').removeClass('datagrid-row-expand').removeClass('datagrid-row-collapse');// 把加号移除// 以下注释行不用// var body = $(this).data().datagrid.dc.body1;// var parent = body.parents("tr[datagrid-row-index="+r+"]");// console.info(parent)// var expander = parent.find('div.datagrid-row-expander[row-index=' + r + ']');// console.info(expander)// expander.removeClass('datagrid-row-expand').removeClass('datagrid-row-collapse');}}// 展开行里面的行高会出现滑动轮 还奇偶分开 很难看// 这里是清除滑轮var heightRow = $("#"+"ddv-"+index).siblings('div.datagrid-view2').find('.datagrid-body');// 拿到和展示航的对象的同级元素的对象  行高就在这个对象里面var height = heightRow.height();console.info("高度为:"+height);height = height +2; // 高度+1 没用 加2才行，如果在浏览器上测试 +1 就可以去除滑轮console.log("变更:"+height)heightRow.height(height+"px");// 设置行高console.log(heightRow.height());setTimeout(function(){// 这里 detailview 都需要哈$('#jobTaskInfo').datagrid('fixDetailRowHeight',index);$('#jobTaskInfo').datagrid('fixRowHeight',index);},0);}});$('#jobTaskInfo').datagrid('fixDetailRowHeight',index);// 这里 detailview 都需要哈},toolbar: '#jobTaskInfoToolbar'});});

参考文献:
   https://www.jeasyui.net/extension/189.html
   https://www.jeasyui.net/plugins/183.html
   https://www.cnblogs.com/xiaoruilin/p/9334022.html // 删除的文章没用上

加号隐藏

easyUI折叠表格-默认展开操作-去除扩展符号（+）-清除滚轮--实例加效果图相关推荐

antd 表格树如何展开_ant-design-pro protable 树形表格默认展开
Protable 是在antd 的 table 上进行了一层封装,antd -table中有的属性它都支持. 当表格数据中有children字段,table会默认生成树形可展开表格,有时候需要一开始就 ...
easyui、表格中添加操作一列，将操作下设置为修改，点击修改弹出该行对象的编号。
页面中的代码(自己引入easy插件): <body> <div id="table"></div> </body> <scri ...
antd可展开的表格怎么默认展开
写项目的时候不少场景用到了antd的这种表格,使用起来简单,方便,但是有可能会遇到一些问题例如: 表格默认展开失效的问题 defaultExpandAllRows 我们使用这个方法之后发现表格并没有 ...
(Table)操作：Element-ui 中 Table 表格的设置表头/去除下标线/设置行间距等属性的使用及 slot-scope=“scope“ 的使用案例
Ⅰ.Element-ui 提供的Table组件与想要目标情况的对比: 1.Element-ui 提供Table组件情况: 其一.Element-ui 自提供的Table代码情况为(示例的代码): // ...
vue折叠面板如何默认展开第一项
折叠面板折叠面板官网: 项目展示: 代码展示: 默认展开第一个默认展开第二个默认全部展开默认全部折叠这里的title名字是自己定义的.绑定的值为name的值.由于这是一个循环嵌套的面板,故而 ...
Adobe Acrobat DC pro 打开PDF文件后目录默认折叠，或默认展开
有时候我们使用PDF阅读器(Adobe或者Foxit等)PDF文件时,目录默认是全部折叠.全部展开或者部分折叠的,如果要改变默认状态,只需手动折叠或展开成想要的状态,然后另存即可.打开另存的PDF,目 ...
重谈ExtGrid 扩展行自动展开(一)（expanded row 默认展开）
很长一段时间不碰JS,实际上心里也非常讨厌编码--这点不像团队中另外两个兄弟(两人是疯狂的javascript writer). 今天在做grid时,遇到了须在gird里加入一个row expande ...
el-table 树形表格自定义展开图标_实践一个树形组件
想实践一个树形组件的起因是发现目前主流UI库在树形组件上都没有提供连接线(ant design有,但不知道为什么设计得发虚,就是各元素之间没有严格衔接上,见下图,而Vue生态圈中的Element UI ...
react-antd table树形数据默认展开行实现以及自定义图标实现及踩坑(defaultExpandedRowKeys,expandedRowKeys)
前言: 最近在做一个权限管理的后台项目,经常涉及到树形数据展示,就用到了antd,table表格树形数据组件.记录一下使用过程的坑. 环境及配置: antd -3.23.6(大版本为antd 3) ...

easyUI折叠表格-默认展开操作-去除扩展符号（+）-清除滚轮--实例加效果图

easyUI折叠表格-默认展开操作-去除扩展符号（+）-清除滚轮--实例加效果图相关推荐

最新文章

热门文章