在 jQuery EasyUI 中,如果你想要设置冻结列,以便在滚动时保持某些列的可见性,你可以使用 frozenColumns 属性。以下是一个简单的例子,演示了如何在 EasyUI 的 DataGrid 中设置冻结列:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery EasyUI 设置冻结列示例</title>
    <!-- 引入 jQuery 库 -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <!-- 引入 EasyUI 样式和脚本文件 -->
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>

    <!-- 创建包含冻结列的 EasyUI Datagrid -->
    <table id="datagrid" class="easyui-datagrid" style="width:100%;height:300px"
           url="your_data_url"
           pagination="true"
           rownumbers="true"
           fitColumns="true"
           singleSelect="true"
           frozenColumns="[[
               {field:'frozenColumn1',title:'冻结列1',width:100},
               {field:'frozenColumn2',title:'冻结列2',width:100}
           ]]"
           columns="[[
               {field:'column1',title:'列1',width:100},
               {field:'column2',title:'列2',width:100},
               {field:'column3',title:'列3',width:100},
               {field:'column4',title:'列4',width:100},
               {field:'column5',title:'列5',width:100}
               <!-- 添加更多列... -->
           ]]">
    </table>

</body>
</html>

在上述代码中,frozenColumns 属性用于定义冻结的列,它是一个二维数组。在每个子数组中,你可以指定一个或多个列,这些列将被冻结在左侧,而其他列可以水平滚动。

在这个例子中,两列('frozenColumn1' 和 'frozenColumn2')被定义为冻结列。你可以根据需要修改列的数量和宽度。其余的列在水平滚动时将保持可见。

确保替换 "your_data_url" 为实际数据源的 URL,并根据你的数据模型修改列的名称和数量。


转载请注明出处:http://www.zyzy.cn/article/detail/13108/jQuery EasyUI