请先看这则博文在来阅读此博文,便于理解:https://blog.csdn.net/qq_24612753/article/details/85068385
我们将抛弃先前的datagrid-detailview.js的用法。采用全新的使用方法,当然插件也得重新跟新一下,
新插件下载地址:https://download.csdn.net/download/qq_24612753/10904442
注意:一定要先看我的上一篇博文。
使用方法:
1、在需要添加操作的列中,使用formatter格式化函数:
2、在初始化函数之外定义addAbq这个函数
/*
* 添加操作列格式化
*/
function addAbq(value,row,index){
var result="<a href='javascript:;' οnclick='zhankai(this,"+index+")'><span class='datagrid-row-expand1 datagrid-row-expander1' id='row"+index+"'>展开</span></a> <a href='javascript:;' οnclick='addColumn("+index+")'>操作记录</a>";
return result;
}
3、在定义zhankai方法和addColumn方法,addColumn方法省略,重要的zhankai这个方法。
function zhankai(obj){
var result=$(obj).text();
var index=$(obj).parent().parent().parent().attr('datagrid-row-index');
/*不能使用formatter传过来的index,在调用deleteRow的时候减少一行而后面的行号,渲染的行号变了,而formatter上面的行 号 没有变化,导致删除一行之后后面的行不能正常展开。*/
if(result=="展开"){
$("#ordertable").datagrid('unselectRow',index);
$("#ordertable").datagrid("expandRow",index);
$(obj).find("span").text("收起");
$(obj).parents('tr[datagrid-row-index='+index+']').css({"font-weight":"600"});
}else{
$("#ordertable").datagrid("collapseRow",index);
$(obj).find("span").text("展开");
$(obj).parents('tr[datagrid-row-index='+index+']').css({"font-weight":"400"});
}
}
4、最终的效果图: