首先上效果图,点击“运单数量”列的数字实现展开收缩
实现步骤
(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');
}
虽说这个功能实现的代码不多,但想出这个方法也是一个契机,费了些时间,故分享给大家,如果能帮到大家的话点个赞呗~~