easyui的datagrid如何获取选中行数据

2025-10-19 06:02:24

1、百度搜索easyui,找到easyui的官网,下载easyui的jsAPI文件,并将js文件添加到项目中,具体目录,看个人的习惯和爱好。

easyui的datagrid如何获取选中行数据

2、新建html页面,将easyui的关键js文件及css文件引入到页面,引入方法如下:

<link href="/Scripts/jquery-easyui-1.5/themes/bootstrap/easyui.css" rel="stylesheet" />

    <link href="/Scripts/jquery-easyui-1.5/themes/icon.css" rel="stylesheet" />

    <script src="/Scripts/jquery-easyui-1.5/jquery.min.js"></script>

    <script src="/Scripts/jquery-easyui-1.5/jquery.easyui.min.js"></script>

easyui的datagrid如何获取选中行数据

3、在页面声明datagrid的渲染元素,该元素主要是datagrid显示的载体。

 <div id="grid" fit="true">

</div>

easyui的datagrid如何获取选中行数据

4、编写js模块,为datagrid绑定数据源及配置字段及属性,到这里,datagrid的配置就完成了,这时,我们运行页面就可以得到一个带分页的列表

 grid = $("#grid").datagrid({

            title: "测试",

            view: detailview,          

            url: 'GetList',

            sortName: 'Road2',

            sortOrder: 'desc',

            idField: 'T_ID',

            pageSize: 30,

            frozenColumns: [[

                        { field: 'ck', checkbox: true }

            ]],

            columns: [[

                { field: 'Road2', title: '路口编号', width: 100, sortable: true, align: 'center' },

                { field: 'Road1', title: '路口名称', width: 160, sortable: true, align: 'center' },

            ]],

            pagination: true,

            rownumbers: true,

            singleSelect: false,

            toolbar: [

                { text: "合并数据", iconCls: "icon-edit", handler: HBSJ },

                { text: "删除数据", iconCls: "icon-remove", handler: Remove },

                { text: "通过审核", iconCls: "icon-ok", handler: function(){SH(2);} },

                { text: "不通过审核", iconCls: "icon-no", handler: function(){SH(1);} }

            ]

easyui的datagrid如何获取选中行数据

5、编写获取datagrid选中行的js,具体实现如下:

注意:rows就是选中的所有的行的数据。

 var rows = grid.datagrid('getSelections');

        var num = rows.length;

        if (num == 0) {

            $.messager.alert('提示', '请选择一条记录进行操作!', 'info');

            return;

        }

        else if (num > 1) {

            $.messager.alert('提示', '您选择了多条记录,只能选择一条记录进行修改!', 'info');

            return;

        }

easyui的datagrid如何获取选中行数据

6、运行页面,我们就可以看到相应的结果。

easyui的datagrid如何获取选中行数据

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢