jQuery+EasyUI实现treegrid/datagride所绑定列只能够输入数字，且保留N位小数

最新推荐文章于 2023-06-25 16:38:51 发布

原创最新推荐文章于 2023-06-25 16:38:51 发布 · 1.2w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #datagrid #table #asp.net #ajax #json

jQuery+EasyUI 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用EasyUI datagrid的可编辑列只允许输入数字，并保留两位小数的操作方法，包括在表头设置要求和通过Ajax获取JSON数据源的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于jQuery和EasyUI我就不多做介绍了，都是JS框架，而EasyUI是建立在jQuery的基础之上的框架而已。用过EasyUI的童鞋可能都很习惯性地使用过其treegrid和datagride。这两个东西比asp.net内的列表控件DataTable、Repeater好用多了的。treegrid和datagrid的最大特征就是灵活性够强，数据源都是通过Ajax页面获取，以Json格式返回。

有些时候，我们在项目中需要对treegrid和datagrid的可编辑列的格式有所要求，比如我只能够输入汉字、只能够下拉选择等等。这里就以datagrid的可编辑列只允许输入数字，且保留两位小数为例：

或许一说到这个问题，很多人都会选择直接在table内绑定列，如下：

 $('#table').datagrid({

                rownumbers: "true", idField: "L_ID", treeField: "L_NAME", nowrap: false, animate: true,

                collapsible: true, loadMsg: "加载数据，请稍候...", singleSelect: true,

                columns: [[

        {

            field: 'L_NAME',

            title: '组织节点名称',

            width: 200

        },

        {

            field: 'L_USERS',

            title: '成员',

            width: 400

        }

    ]]

            });

就是直接利用JS往table内附加行的方式，但是如果要在列上要求我只能够输入数字，且保留2为小数或许就不行了吧。这里我采用了是如下：

1、先在table内加上表头，在表头的指定列说明其要求。如下：

        <table id="table">
        <thead>
            <tr>
                <th field = "USER_NAME" width="200">
                    成员名称
                </th>
                <th field = "U_WORK" width="100" editor="{type:'numberbox',options:{precision:2}}">
                   工作量比重
                </th>
            </tr>
        </thead>
        </table>

2、然后在将ajax返回过来的Json数据格是以数据源的形式附加到table上，当对某行某列进行编辑的时候，此时的格式要求就会生效。

3、说明：type:numberbox 说明类型为数据类型 options:{precision:2} 说明保留两位小数。