可折叠table框treegrid插件固定左边,右边可滑动

效果如图所示:

代码如下:

<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<table id="demott"></table>
<script>
var datas= [
        	{
        		"ascId": "16b64a8f87578a90cc7866a4dd195dcb",
        		"ascLevel": "国家级",
        		"children": [
        			{
        				"ascId": "16b64a930194b0c5c8fa6ef4a7c8e5f7",
        				"ascLevel": "市级",
        				"children": [],
        				"ascName": "建筑师分会",
        				"chairman": "",
        				"viceChairman": "",
        				"standingChairman": "",
        				"director": "",
        				"vicePresident": "",
        				"secretaryGeneral": "",
        				"underSecretaryGeneral": "",
        				"headOfComm": "",
        				"underHeadOfComm": "",
        				"committee": "",
        				"createTime": "2019-06-17",
        				"fdPersonId": "person_002",
        				"zindex": 3
        			},
        			{
        				"ascId": "16b64a957bd9defd0a9bc6847419148d",
        				"ascLevel": "省级",
        				"children": [],
        				"ascName": "体育建筑分会",
        				"chairman": "",
        				"viceChairman": "",
        				"standingChairman": "",
        				"director": "",
        				"vicePresident": "",
        				"secretaryGeneral": "",
        				"underSecretaryGeneral": "",
        				"headOfComm": "",
        				"underHeadOfComm": "",
        				"committee": "",
        				"createTime": "2019-06-17",
        				"fdPersonId": "person_003",
        				"zindex": 2
        			},
        			{
        				"ascId": "16b64a976a7909ca18156dd49a3bf44f",
        				"ascLevel": "市级",
        				"children": [],
        				"ascName": "建筑结构分会",
        				"chairman": "",
        				"viceChairman": "",
        				"standingChairman": "",
        				"director": "",
        				"vicePresident": "",
        				"secretaryGeneral": "",
        				"underSecretaryGeneral": "",
        				"headOfComm": "",
        				"underHeadOfComm": "",
        				"committee": "",
        				"createTime": "2019-06-17",
        				"fdPersonId": "person_004",
        				"zindex": 3
        			},
        			{
        				"ascId": "16b64a994042feeb57c2b7d4dc9a0f32",
        				"ascLevel": "市级",
        				"children": [],
        				"ascName": "建筑给水排水研究分会",
        				"chairman": "",
        				"viceChairman": "",
        				"standingChairman": "",
        				"director": "",
        				"vicePresident": "",
        				"secretaryGeneral": "",
        				"underSecretaryGeneral": "",
        				"headOfComm": "",
        				"underHeadOfComm": "",
        				"committee": "",
        				"createTime": "2019-06-17",
        				"fdPersonId": "person_005",
        				"zindex": 3
        			},
        			{
        				"ascId": "16b64a9b4f18e753141f4ed4b938deea",
        				"ascLevel": "市级",
        				"children": [
        					{
        						"ascId": "16b64a9b4f18e753141f4ed4b938deee",
        						"ascLevel": "市级",
        						"children": [],
        						"ascName": "建筑防火综合技术分会二",
        						"chairman": "理查德",
        						"viceChairman": "李伟",
        						"standingChairman": "万坤",
        						"director": "蒋博准",
        						"vicePresident": "李启亮",
        						"secretaryGeneral": "王国山",
        						"underSecretaryGeneral": "许金",
        						"headOfComm": "查亮",
        						"underHeadOfComm": "徐军",
        						"committee": "王伟",
        						"createTime": "2019-06-17",
        						"fdPersonId": "person_001",
        						"zindex": 3
        					}
        				],
        				"ascName": "建筑防火综合技术分会",
        				"chairman": "",
        				"viceChairman": "",
        				"standingChairman": "",
        				"director": "",
        				"vicePresident": "",
        				"secretaryGeneral": "",
        				"underSecretaryGeneral": "",
        				"headOfComm": "",
        				"underHeadOfComm": "",
        				"committee": "",
        				"createTime": "2019-06-17",
        				"fdPersonId": "person_006",
        				"zindex": 3
        			}
        		],
        		"ascName": "中国建筑学会",
        		"chairman": "理查德",
        		"viceChairman": "李伟",
        		"standingChairman": "万坤",
        		"director": "蒋博准",
        		"vicePresident": "李启亮",
        		"secretaryGeneral": "王国山",
        		"underSecretaryGeneral": "许金",
        		"headOfComm": "查亮",
        		"underHeadOfComm": "徐军",
        		"committee": "王伟",
        		"createTime": "2019-06-17",
        		"fdPersonId": "person_001",
        		"zindex": 1
        	}
        ]
    $('#demott').treegrid({
                // url:'data/treegrid_data.json',
                idField: 'ascId',
                treeField: 'ascName',
                data: datas,
                frozenColumns: [[	// 配置五:这就是被冻结的列
                    { field: 'ascLevel', title: '协会级别', width: 100, align: 'center', fixed: true},
                    { field: 'ascName', title: '名称', width: 300, align: 'left', fixed: true}
                ]],
                columns: [[
                    { field: 'chairman', title: '理事长', width: '8%', align: 'center' },
                    { field: 'viceChairman', title: '副理事长', width: '8%', align: 'center' },
                    { field: 'standingChairman', title: '常务理事', width: '8%', align: 'center' },
                    { field: 'director', title: '理事', width: '8%', align: 'center', },
                    { field: 'vicePresident', title: '主任委员', width: '8%', align: 'center' },
                    { field: 'secretaryGeneral', title: '副主任委员', width: '8%', align: 'center' },
                    { field: 'underSecretaryGeneral', title: '秘书长', width: '8%', align: 'center' },
                    { field: 'headOfComm', title: '副秘书长', width: '8%', align: 'center', align: 'center' },
                    { field: 'underHeadOfComm', title: '委员', width: '8%', align: 'center' },
                    { field: 'committee', title: '专家', width: '8%', align: 'center' },
                    { field: 'committee', title: '会员', width: '8%', align: 'center' },
                    { field: 'committee', title: '副会长', width: '8%', align: 'center' },
                    { field: 'committee', title: '研究员', width: '8%', align: 'center' },
                    { field: 'committee', title: '资深会员', width: '8%', align: 'center' },
                    { field: 'committee', title: '主席', width: '8%', align: 'center' },
                    { field: 'committee', title: '编委', width: '8%', align: 'center' },
                    { field: 'committee', title: '总工委员会', width: '8%', align: 'center' }
                ]]
            });
</script>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值