jEasyUI 创建列组合学习笔记

介绍

jEasyUI 是一个基于 jQuery 的 UI 库，它提供了一套简单易用、功能丰富、高效的界面组件，包括表格、树形控件、表单等。其中，列组合是表格的一个重要功能，可以将多个列合并成一个大的单元格，方便用户查看数据。下面我们将详细介绍如何使用 jEasyUI 创建列组合。

使用方法

在 HTML 页面中引入 jEasyUI 和 jQuery 库。

htmlCopy Code
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

创建表格，并指定列属性。

htmlCopy Code
<table id="dg" title="商品列表" class="easyui-datagrid" style="width:700px;height:250px"
        url="get_products.php" toolbar="#toolbar" pagination="true"
        rownumbers="true" fitColumns="true" singleSelect="true">
    <thead>
        <tr>
            <th field="itemid" width="80">商品编号</th>
            <th field="productname" width="100">商品名称</th>
            <th field="listprice" width="80" align="right">定价</th>
            <th field="unitcost" width="80" align="right">成本价</th>
            <th field="status" width="60" align="center">状态</th>
            <th field="attr1" width="100" rowspan="2">扩展属性</th>
            <th field="action" width="80" align="center" colspan="2">操作</th>
        </tr>
        <tr>
            <th field="itemcode" width="80">编码</th>
            <th field="productid" width="100">货号</th>
            <th field="unitprice" width="80" align="right">单价</th>
            <th field="listcost" width="80" align="right">成本价2</th>
            <th field="instock" width="60" align="center">库存</th>
            <th field="sell" width="80" align="center">销售</th>
            <th field="location" width="80" align="center">位置</th>
        </tr>
    </thead>
</table>

通过 rowspan 和 colspan 属性指定列组合效果。

htmlCopy Code
<th field="attr1" width="100" rowspan="2">扩展属性</th>
<th field="action" width="80" align="center" colspan="2">操作</th>

上面代码中，attr1 这一列的 rowspan 属性为 2，表示该列占用两行单元格；action 这一列的 colspan 属性为 2，表示该列占用两列单元格。

示例

下面是一个完整的 jEasyUI 列组合示例代码，可以参考实现自己的表格。

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jEasyUI 创建列组合学习笔记</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <table id="dg" title="商品列表" class="easyui-datagrid" style="width:700px;height:250px"
        url="get_products.php" toolbar="#toolbar" pagination="true"
        rownumbers="true" fitColumns="true" singleSelect="true">
        <thead>
            <tr>
                <th field="itemid" width="80">商品编号</th>
                <th field="productname" width="100">商品名称</th>
                <th field="listprice" width="80" align="right">定价</th>
                <th field="unitcost" width="80" align="right">成本价</th>
                <th field="status" width="60" align="center">状态</th>
                <th field="attr1" width="100" rowspan="2">扩展属性</th>
                <th field="action" width="80" align="center" colspan="2">操作</th>
            </tr>
            <tr>
                <th field="itemcode" width="80">编码</th>
                <th field="productid" width="100">货号</th>
                <th field="unitprice" width="80" align="right">单价</th>
                <th field="listcost" width="80" align="right">成本价2</th>
                <th field="instock" width="60" align="center">库存</th>
                <th field="sell" width="80" align="center">销售</th>
                <th field="location" width="80" align="center">位置</th>
            </tr>
        </thead>
    </table>
    <div id="toolbar">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:void(0)">添加</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="javascript:void(0)">编辑</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:void(0)">删除</a>
    </div>
</body>
</html>

总结

通过 jEasyUI 创建列组合，可以方便地将表格中的多列合并成一个单元格，实现更加直观、易懂的数据展示效果。同时，jEasyUI 提供了丰富的 UI 组件和功能，能够满足各种复杂的前端需求。