首先上效果图，点击“运单数量”列的数字实现展开收缩 实现步骤 （1）引入 datagrid-detailview.js，下载地址 （2）初始化表格
$("#finishedDispatchTable").datagrid({ data: finishedList, width : '100%', height : 'auto', pagination : false, showFooter:true, idField: 'id', singleSelect:false, checkOnSelect:true, selectOnCheck:false, rownumbers:true, columns: [[ {field: 'id',title: 'ID',width:'10%',checkbox: true}, {field: '_id',title: 'ex',width:'10%',expander: true,hidden:true},//隐藏默认+-按钮 {field: 'carName',title: '车型',width:'180px',align:'center'}, {field: 'cusName',title: '承运商',width:'140px',align:'center'}, {field: 'carnum',title: '车牌',width:'80px',align:'center'}, {field: 'driver',title: '司机',width:'80px',align:'center'}, {field: 'driverPhone',title: '电话',width:'120px',align:'center'}, {field: '_vehicle',title: '车型装载量',width:'120px',align:'center',}, {field: '_weight',title: '总装载量',width:'120px',align:'center'}, {field: '_rateWeight',title: '装载率',width:'160px',align:'center' }, {field: 'waybillNum',title: '运单数量',width:'80px',align:'center', formatter:function(value,row,index){ var action = "<a id='numBtn' class='aSty' onClick='toggleExpandRow("+index+")' href='javascript:void(0)'>"+value+"</a>"; return action; } }, {field: '_operate',title: '操作',width:'80px',align:'center', formatter:function(value,row,index){ var action = "<a id='releaseBtn' class='aSty' onClick='onRelease("+index+")' href='javascript:void(0)'>释放</a>"; return action; } } ]], view : detailview,//详细试图，引入的js中有定义 detailFormatter : function(index, row) { return '<table id="ddv-'+index+'" class="ddv"></table>';//这里返回的是需要展开的内容 }, onExpandRow : function(index, row) { //$("#ddv-"+index)需要展开的表格的id $("#ddv-"+index).datagrid({ data: JSON.parse(row.waybills),//这里加载折叠表格的数据 width : '100%', height : 'auto', pagination : false, showFooter:true, idField: 'id', rownumbers:true, columns: [[ {field: 'deliveryDate',title: '配送日期',width:'120px',align:'center'}, {field: 'shippingSiteName',title: '发货站点',width:'159px',align:'center'}, {field: 'receivingSiteName',title: '收货站点',width:'159px',align:'center'}, {field: 'routeName',title: '所属线路',width:'120px',align:'center'}, {field: 'goodsName',title: '货物类型',width:'120px',align:'center'}, {field: 'sumVolume',title: '总体积',width:'120px',align:'center'}, {field: 'sumWeight',title: '总数量',width:'120px',align:'center'}, {field: 'sumTotal',title: '总件数',width:'120px',align:'center'} ]] }) $('#finishedDispatchTable').datagrid('fixDetailRowHeight',index);//用来固定当详细内容加载时的行高度 }, onLoadSuccess:function(){ $('#finishedDispatchTable').datagrid('clearSelections');//清空选中 } });（3）重点：隐藏默认的±按钮：{field: ‘_id’,title: ‘ex’,width:‘10%’,expander: true,hidden:true} （4）重点：自定义按钮“运单数量”，toggleExpandRow()方法实现切换显示隐藏，$expander 实际就是隐藏的±按钮，当点击列表中的数字时，触发真正的±按钮的点击事件，实现折叠表格的显示和收缩
//点击运单数量切换展开隐藏运单列表 function toggleExpandRow(index){ var $expander = $('#finishedDispatchTable').datagrid('getExpander',index);//获取行扩展对象 $expander.trigger('click'); }虽说这个功能实现的代码不多，但想出这个方法也是一个契机，费了些时间，故分享给大家，如果能帮到大家的话点个赞呗~~
