jEasyUI 设置冻结列学习笔记

什么是 jEasyUI

jEasyUI 是一个基于 jQuery 的开源 UI 库，提供了一系列易用的界面组件和插件，包括表格、树形结构、弹窗、菜单等等。jEasyUI 具有易于学习、易于定制、易于整合的特点，是众多 Web 开发者使用的 UI 框架之一。

设置冻结列

在 jEasyUI 的表格组件中，我们可以通过设置冻结列实现在滚动表格时，某些列保持固定不动，以方便用户查看数据。具体操作步骤如下：

在 HTML 页面中引入 jEasyUI 的 CSS 和 JS 文件以及 jQuery 文件。

htmlCopy Code
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.5/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.5/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.9.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.9.5/jquery.easyui.min.js"></script>

在 HTML 页面中添加表格元素，并设置表格属性。

htmlCopy Code
<table id="dg" class="easyui-datagrid" style="width:100%;height:300px"
    data-options="
        url:'get_data.php',
        pagination:true,
        rownumbers:true,
        singleSelect:true,
        columns:[[...]]
    ">
</table>

其中 url 属性指定了表格数据的来源，pagination 属性指定了是否开启分页功能，rownumbers 属性指定了是否显示行号，singleSelect 属性指定了是否开启单选模式，columns 属性指定了各列的配置。

在表格配置中为需要冻结的列添加 frozen:true 属性。

jsCopy Code
columns:[[
    {field:'item_id',title:'Item ID',width:80},
    {field:'product_name',title:'Product Name',width:200,frozen:true},
    {field:'list_price',title:'List Price',width:80},
    {field:'unit_cost',title:'Unit Cost',width:80},
    {field:'status',title:'Status',width:60},
    {field:'action',title:'Action',width:80}
]]

在上述代码中，我们为 product_name 列添加了 frozen:true 属性，表示该列会被冻结。其他列不设置 frozen 属性，则默认不会被冻结。

运行 HTML 页面，在表格中滚动时，可以看到 product_name 列保持固定不动。

实例演示

以下是一个使用 jEasyUI 设置冻结列的实例演示，可供参考。

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jEasyUI 设置冻结列学习笔记</title>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.5/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.5/themes/icon.css">
    <script type="text/javascript" src="jquery-easyui-1.9.5/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.9.5/jquery.easyui.min.js"></script>
</head>
<body>
    <table id="dg" class="easyui-datagrid" style="width:100%;height:300px"
        data-options="
            url:'https://www.easy-mock.com/mock/5edd7bf4ce04d06e6faf4163/example/items',
            pagination:true,
            rownumbers:true,
            singleSelect:true,
            columns:[[ 
                {field:'item_id',title:'Item ID',width:80},
                {field:'product_name',title:'Product Name',width:200,frozen:true},
                {field:'list_price',title:'List Price',width:80},
                {field:'unit_cost',title:'Unit Cost',width:80},
                {field:'status',title:'Status',width:60},
                {field:'action',title:'Action',width:80}
            ]]
        ">
    </table>
</body>
</html>

在上述代码中，我们引入了 jEasyUI 的 CSS 和 JS 文件以及 jQuery 文件，并创建了一个表格，设置了表格的相关属性和各列的配置，其中 product_name 列被设置为冻结列。

效果如下图所示：

jEasyUI 设置冻结列实例演示