小周的技术博客

困难是培养伟大心志的保姆,唯有这个冷酷的保姆才会不停地推着摇篮,培养一个勇敢、刚健的孩子。 ---------布赖恩特

EasyUI中datagrid组件数据记录添加checkbox复选框

本文来自 小周的技术博客 转载请注明;

本文地址:http://blog.lyttensoft.win/?id=64




1、配置DataGrid参数

$('#cotb').datagrid({
            fit: true, //自适应大小
            striped: true, //是否显示斑马线效果。
            rownumbers: true, //如果为true,则显示一个行号列。
            fitColumn: true, //允许表格自动缩放,以适应父容器
            pagination: true, //如果为true,则在DataGrid控件底部显示分页工具栏。
            fitColumns: true, //真正的自动展开/收缩列的大小,以适应网格的宽度,防止水平滚动。
            singleSelect: true, //如果为true,则只允许选择一行。
            autoRowHeight: true, //定义设置行的高度,根据该行的内容。设置为false可以提高负载性能。
            checkOnSelect: true,
            selectOnCheck: true, //selectOnCheck
            pageSize: 20,
            pageList: [20, 40, 80],
            nowrap: false, //设置为true,当数据长度超出列宽时将会自动截取
            loadMsg: "正在加载,请稍后......", //在从远程站点加载数据的时候显示提示消息。
            url: 'url',
            onSelect: function (index, row) {
                selectedrow = row; //设置选中行数据
            },
            onDblClickRow: function (index, row) {
                edit(index);
            },
            rowStyler: function (index, row) {
                var style = "";
                if ((row.EnabledCount !== row.SettlementCount)) {
                    style += 'font-weight:bold;';
                }
                return style;
            },
            queryParams: { 
            },
            onLoadSuccess: function () {

            },
            singleSelect:false //将单行选择 设置为false,就可以使用checkbox复选框了。
        });


将 singleSelect:false //将单行选择 设置为false,就可以使用checkbox复选框了。


2、数据表头<th>中添加checkbox

 <th data-options="field:'ck',checkbox:true"></th>


到这里数据加载后,就可以进行多项选择或者全选了。


3、获取选中的checkbox数据。

$("#btncheck").click(function () {
            var list = $('#cotb').datagrid('getChecked');
            var strs = "";
            for (var i = 0; i < list.length; i++) {
                strs += list[i].Name + ",";
            }
            alert(strs);
        });


完成。


本文来自 小周的技术博客 转载请注明;

本文地址:http://blog.lyttensoft.win/?id=64

发表评论:

小周的技术博客