easyui treegrid/datagrid 冻结右侧列实现（超简单实现，效果超级好）

最新推荐文章于 2024-04-13 07:06:41 发布

Kalvin_csdn

最新推荐文章于 2024-04-13 07:06:41 发布

阅读量6.1k

点赞数 3

分类专栏： jQuery 文章标签： easyui treegrid 冻结右侧列 treegrid宽度自适应 frozenColumns datagrid右冻结

本文链接：https://blog.csdn.net/lkh1992/article/details/92845235

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

easyui treegrid/datagrid 冻结右侧列实现，并且treegrid/datagrid列表宽度自适应

直入主题：

一、下载已封装好的js和css文件：（代码量很少，只是为了方便大家拿来即用而已）

1.csdn下载：压缩包
2.云下载：压缩包

二、页面引入上面两个资源文件：

注意：kvf-treegrid.css这个文件要在easyui.css文件之后引入，否则无法生效。（还要下载easyui相关的js哦）
例如：
在这里插入图片描述

<!-- css文件 -->
<link rel="stylesheet" href="/static/plugins/easyui/themes/material/easyui.css">
<link rel="stylesheet" href="/static/css/kvf-treegrid.css">

<!-- js文件 -->
<script src="/static/js/jquery.min.js"></script>
<script src="/static/plugins/easyui/easyloader.js"></script>
<script src="/static/js/kvf-treegrid.js"></script>

三、使用：注意看代码注释（配置一至配置六）

var treeGridInst;
easyloader.load('treegrid', function () {
   treeGridInst = $('#treeGridId').treegrid({
       url: 'menu_tree.json',
       method: 'get',
       idField: 'id',
       treeField: 'name',
       toolbar: '#headToolbarTpl',
       pagination: true,
       pageNumber: 1,
       pageSize: 10,
       pageList: [10, 20, 30, 40, 50],
       showHeader: true,
       nowrap: true,
       animate: true,
       scrollbarSize: 18,
       scrollOnSelect: false,
       fitColumns: true,	// 配置一：必须为true
       checkbox: true,
       checkOnSelect: true,
       emptyMsg: '无数据',
       onExpand: function (row) {
           treeGridKit.fitRightFrozenCol(treeGridInst);	// 配置二：固定
       },
       onCollapse: function (row) {
           treeGridKit.fitRightFrozenCol(treeGridInst);	// 配置三：固定
       },
       loadFilter: function (r) {
           // 处理后台接口返回的列表数据
           return r;
       },
       onLoadSuccess: function (row, data) {
           treeGridKit.fitRightFrozenCol(treeGridInst);	// 配置四：固定
       },
       frozenColumns: [[	// 配置五：这就是被冻结的列
           {field: 'toolbar', title: '操作', width: 200, align: 'center', fixed: true, formatter: formatter.rowToolbar}
       ]],
       columns: [[	// 配置六： fixed属性要留一列false（随便一列作为自适应列），其它列全部设置true
           {field: 'name', title: '菜单名称', sortable: true, width: 220, fixed: true}
           ,{field: 'icon', title: '图标', width: 60, align: 'center', formatter: formatter.icon, fixed: true}
           ,{field: 'type', title: '类型', width: 80, align: 'center', formatter: formatter.type, fixed: true}
           ,{field: 'url', title: 'URL', width: 220, fixed: false}
           ,{field: 'permission', title: '权限标识', width: 180, fixed: true}
           ,{field: 'sort', title: '排序号', width: 100, align: 'center', fixed: true}
       ]]
   });
});

// 监听浏览器窗口变化自适应
$(window).resize(function () {
	treeGridKit.fitRightFrozenCol(treeGridInst);
});