easyui datagrid拓展datagrid-detailview.js （看我另外一篇博文，这个插件是在上面进行在拓展的）

请先看这则博文在来阅读此博文，便于理解：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>&nbsp;&nbsp;<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、最终的效果图：