easyui datagridview自定义展开收缩,不带+-号

首先上效果图,点击“运单数量”列的数字实现展开收缩
在这里插入图片描述
实现步骤
(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');
}

虽说这个功能实现的代码不多,但想出这个方法也是一个契机,费了些时间,故分享给大家,如果能帮到大家的话点个赞呗~~

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值