jEasyUI 設置凍結列的實現(xiàn)示例

更新時間：2025年11月03日 11:11:35 作者：lsx202406

本文主要介紹了jEasyUI 設置凍結列的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

jEasyUI 是一個基于 jQuery 的框架，它提供了豐富的 UI 組件，使得 Web 應用的界面開發(fā)變得更加簡單快捷。在 jEasyUI 的數據網格（datagrid）組件中，凍結列功能是一項非常實用的特性，它允許用戶將表格中的某些列固定在左側，即使在水平滾動時也不會移動。這對于需要同時查看表格中的固定數據和滾動數據非常有用。

凍結列的設置方法

要設置 jEasyUI 數據網格的凍結列，您需要按照以下步驟操作：

定義數據網格：首先，您需要定義一個數據網格，可以通過 HTML 標簽或 JavaScript 動態(tài)創(chuàng)建。
設置凍結列：在定義列（columns）時，通過設置列的 frozen 屬性為 true 來指定哪些列是凍結列。
初始化數據網格：使用 jQuery 選擇器選擇數據網格的容器，并調用 datagrid 方法來初始化數據網格。

下面是一個簡單的示例，展示了如何設置凍結列：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jEasyUI 設置凍結列示例</title>
    <link rel="stylesheet" type="text/css" href="jeasyui/themes/default/easyui.css" rel="external nofollow" >
    <link rel="stylesheet" type="text/css" href="jeasyui/themes/icon.css" rel="external nofollow" >
    <script type="text/javascript" src="jeasyui/jquery.min.js"></script>
    <script type="text/javascript" src="jeasyui/jquery.easyui.min.js"></script>
</head>
<body>
    <table id="dg" title="我的數據網格" class="easyui-datagrid" style="width:700px;height:250px"
            url="data.json" singleSelect="true" fitColumns="true" nowrap="false">
        <thead>
            <tr>
                <th field="id" width="50" frozen="true">ID</th>
                <th field="name" width="50" frozen="true">姓名</th>
                <th field="phone" width="100">電話</th>
                <th field="email" width="100">郵箱</th>
                <th field="address" width="150">地址</th>
            </tr>
        </thead>
    </table>
    <script type="text/javascript">
        $('#dg').datagrid({
            frozenColumns: [[
                { field: 'id', title: 'ID', width: 50, frozen: true },
                { field: 'name', title: '姓名', width: 50, frozen: true }
            ]],
            columns: [[
                { field: 'phone', title: '電話', width: 100 },
                { field: 'email', title: '郵箱', width: 100 },
                { field: 'address', title: '地址', width: 150 }
            ]]
        });
    </script>
</body>
</html>

在這個示例中，ID 和 姓名 列被設置為凍結列。當您水平滾動數據網格時，這兩列將始終保持可見。