Jeecg自定义树形表单

最新推荐文章于 2025-10-21 16:20:46 发布

原创最新推荐文章于 2025-10-21 16:20:46 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#经验分享

Jeecg 专栏收录该内容

1 篇文章

订阅专栏

有时候表单中会使用到树形表单，那么我们因该前端添加代码。
<t:datagrid name="zdxmMainList" pagination="false" isShowSearch="true" fit="true" fitColumns="true" actionUrl="url" idField="id" extendParams="view: detailview,detailFormatter:detailFormatterFun,onExpandRow: onExpandRowFun" queryMode="group" btnCls="bootstrap">

<script>
    //返回行明细内容的格式化函数。
    function detailFormatterFun() {
        var s = '<div class="orderInfoHidden" style="padding:2px;">'
            + '       <div class="easyui-tabs" style="height:230px;width:1400px;">'
            + '          <div title="详细信息" style="padding:2px;">'
            + '             <table class="jfrom_order_linetablelines" ></table>'
            + '          </div>'
            + '       </div>'
            + '    </div>';
        return s;
    }

    //当展开一行时触发
    function onExpandRowFun(index, row) {
        console.log(index);
        //把加上的子表tabs和datagrid初始化
        let tabs = $(this).datagrid('getRowDetail', index).find('div.easyui-tabs');
        tabs.tabs();
        console.log(row)
        let jerome_order_literallines = $(this).datagrid('getRowDetail', index).find('table.jfrom_order_linetablelines');
        jerome_order_literallines.datagrid({
            singleSelect: true,
            loadMsg: '正在加载',
            fitColumns: true,
            height: '180',
            width:'1380',
            pageSize: 50,
            pageList: [50, 150, 200, 250, 300],
            border: false,
            url:"url&field=name,type,sum,paid,unpaid&id="+row.id,
            idField: 'id',
            rownumbers: true,
            pagination: false,
            columns: [[{
                title: '名称',
                field: 'name',
                align: 'center',
                width: 150
            },
            {
                title: '类型',
                field: 'type',
                align: 'center',
                width: 100
            },
            {
                title: '总金额',
                field: 'sum',
                align: 'center',
                width: 100
            },
            {
                title: '已付款',
                field: 'paid',
                align: 'center',
                width: 100
            },
            {
                title: '未付款',
                field: 'unpaid',
                align: 'center',
                width: 100
            },
            ]]
        });
    }
</script>
这是效果图

在这里插入图片描述