easyui实现冻结右侧列

最新推荐文章于 2022-01-21 17:15:02 发布

原创最新推荐文章于 2022-01-21 17:15:02 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#datagrid

easyui 同时被 3 个专栏收录

5 篇文章

订阅专栏

datagrid

4 篇文章

订阅专栏

java

3 篇文章

订阅专栏

这篇博客介绍了如何通过CSS样式`.datagrid-view1`和`.datagrid-view2`来设置表格布局，使得表格的右侧列保持固定不动。同时，结合`frozenColumns`属性，详细阐述了如何在借阅操作列上实现这一效果，该列包含一个点击借阅的按钮和隐藏的借阅状态输入字段。

在页面增加下列样式

<style>
    .datagrid-view1 {
        left: auto;
        right: 0;
    }
    .datagrid-view2 {
        left: 0;
        right: auto;
    }
</style>

并结合frozenColumns 实现冻结右侧列

frozenColumns:[[
            {field: 'borrowOperation', title: '借阅', width: 100, align: 'center',
                formatter: function (value, row, index) {
                    return "<div style='background: #ffc828' id='borrowStatusDiv" + row.id + "'><span id='borrowStatusSpan" + row.id + "'>点击借阅</span></div>" + "<input id='borrowStatus" + row.id + "' type='hidden' value='0'>"
                }
            },
        ]],