EasyUI 的 DataGrid 插件，通过扩展属性的方式给序号列增加个性化标题

水上冰石

于 2024-07-29 00:30:56 发布

阅读量730

点赞数 23

CC 4.0 BY-SA版权

文章标签： easyui 前端 javascript

本文链接：https://blog.csdn.net/jiao_zg/article/details/140759105

在 EasyUI 的 DataGrid 中，没有直接的属性可以设置行号列的标题，但是你可以通过扩展的方法来实现这一功能。通过扩展 EasyUI 的 DataGrid 插件，来增加一个 rownumberTitle 属性，以便通过属性来设置行号列的标题。

以下是具体实现步骤与代码：

扩展 EasyUI DataGrid

首先，我们需要扩展 EasyUI 的 DataGrid 插件，增加一个 rownumberTitle 属性，用于设置行号列的标题。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>EasyUI DataGrid 自定义行号列标题示例</title>
    <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/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <style>
        .datagrid-header-rownumber {
            text-align: center;
            font-weight: bold;