easyui datagrid checkbox的相关属性整理

Posted Mr_伍先生

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了easyui datagrid checkbox的相关属性整理相关的知识,希望对你有一定的参考价值。

DataGrid其中与选择,勾选相关

DataGrid属性:
singleSelect boolean 如果为true,则只允许选择一行。 false 
ctrlSelect boolean 在启用多行选择的时候允许使用Ctrl键+鼠标点击的方式进行多选操作。(该属性自1.3.6版开始可用) 
checkOnSelect boolean 如果为true,当用户点击行的时候该复选框就会被选中或取消选中。如果为false,当用户仅在点击该复选框的时候才会呗选中或取消。(该属性自1.3版开始可用) true 
selectOnCheck boolean 如果为true,单击复选框将永远选择行。如果为false,选择行将不选中复选框。(该属性自1.3版开始可用)
 
DataGrid列是一个数组对象,该元素也是一个数组对象。元素数组里面的元素是一个配置对象,它用来定义每一个列字段。 
checkbox boolean 如果为true,则显示复选框。该复选框列固定宽度。 

DataGrid事件

onSelect rowIndex, rowData 在用户选择一行的时候触发,参数包括:rowIndex:选择的行的索引值,索引从0开始。rowData:对应于所选行的记录。 
onUnselect rowIndex, rowData 在用户取消选择一行的时候触发,参数包括:rowIndex:选择的行的索引值,索引从0开始。rowData:对应于取消选择行的记录。 
onSelectAll rows 在用户选择所有行的时候触发。 
onUnselectAll rows 在用户取消选择所有行的时候触发。 
onCheck rowIndex,rowData 在用户勾选一行的时候触发,参数包括:rowIndex:选中的行索引,索引从0开始。rowData:对应于所选行的记录。(该事件自1.3版开始可用) 
onUncheck rowIndex,rowData 在用户取消勾选一行的时候触发,参数包括:rowIndex:选中的行索引,索引从0开始。rowData:对应于取消勾选行的记录。(该事件自1.3版开始可用) 
onCheckAll rows 在用户勾选所有行的时候触发。(该事件自1.3版开始可用) 
onUncheckAll rows 在用户取消勾选所有行的时候触发。(该事件自1.3版开始可用) 

方法

getChecked none 在复选框呗选中的时候返回所有行。(该方法自1.3版开始可用) 
getSelected none 返回第一个被选中的行或如果没有选中的行则返回null。 
getSelections none 返回所有被选中的行,当没有记录被选中的时候将返回一个空数组。 
clearSelections none 清除所有选择的行。 
clearChecked none 清除所有勾选的行。(该方法自1.3.2版开始可用)  
selectAll none 选择当前页中所有的行。 
unselectAll none 取消选择所有当前页中所有的行。 
selectRow index 选择一行,行索引从0开始。 
selectRecord idValue 通过ID值参数选择一行。 
unselectRow index 取消选择一行。 
checkAll none 勾选当前页中的所有行。(该方法自1.3版开始可用) 
uncheckAll none 取消勾选当前页中的所有行。(该方法自1.3版开始可用) 
checkRow index 勾选一行,行索引从0开始。(该方法自1.3版开始可用) 
uncheckRow index 取消勾选一行,行索引从0开始。(该方法自1.3版开始可用) 

 

项目代码实例

function findCustomerCanUseBailInfo(customerId,agencyId){
     
    $(‘#t_customerCanReturn‘).datagrid(
            {
                idField : ‘id‘, // 只要创建数据表格 就必须要加 ifField
                title : null,
                fit : true,
                url : parent.baseUrl+ ‘customer/bail/bailPayDetailsForAuctions?customerId=‘+customerId+‘&&agencyId=‘+agencyId,
                method : ‘POST‘,
                fitColumns : false,
                nowrap : false,
                striped : true, // 隔行变色特性S
                loadMsg : ‘数据正在加载,请耐心的等待...‘,
                rownumbers : true,
                //sortName : ‘customerNo‘,
                //sortOrder : ‘desc‘,
                rowStyler : function(index, record) {
                },
                onSelect: function( rowIndex, rowData){
                    returnBailForAuctionsSum = Number(returnBailForAuctionsSum)+Number(rowData.canReturnBail);
                    $(‘#bailReturnSum‘).textbox(‘setValue‘,returnBailForAuctionsSum);
                },
                onUnselect: function (rowIndex, rowData) {
                    returnBailForAuctionsSum = Number(returnBailForAuctionsSum)-Number(rowData.canReturnBail);
                    $(‘#bailReturnSum‘).textbox(‘setValue‘,returnBailForAuctionsSum);
                 },
                 onSelectAll:function(rowIndex, rowData){
                     if (selectAllFlag == 1) {
                        
                         var arr = $(‘#t_customerCanReturn‘).datagrid(‘getSelections‘);
                         if (arr.length <= 0) {
                             $(‘#bailReturnSum‘).textbox(‘setValue‘,returnBailForAuctionsSum);
                             return ;
                         } 
                         
                         returnBailForAuctionsSum = 0;
                         
                         for (var i = 0; i < arr.length; i++) {
                             returnBailForAuctionsSum = Number(returnBailForAuctionsSum)+Number(arr[i].canReturnBail);
                         }
                         
                         $(‘#bailReturnSum‘).textbox(‘setValue‘,returnBailForAuctionsSum);
                         
                    }
                 },
                 onUnselectAll:function(rowIndex, rowData){
                     returnBailForAuctionsSum = 0;
                     $(‘#bailReturnSum‘).textbox(‘setValue‘,returnBailForAuctionsSum);             
                 },
                frozenColumns : [ [ // 冻结列特性 ,不要与fitColumns 特性一起使用
                {
                    field : ‘ck‘,
                    width : 50,
                    checkbox : true
                } ] ],
                columns : [ [ {
                    field : ‘bailClass‘,
                    title : ‘保证金类别‘,
                    width : 75,
                    align : ‘center‘,
                    formatter : returnFtt
                },{
                    field : ‘agencyName‘,
                    title : ‘市场名称‘,
                    width : 120,
                    align : ‘center‘,
                }, {
                    field : ‘payWay‘,
                    title : ‘支付渠道‘,
                    width : 80,
                    align : ‘center‘,
                    formatter : payWayFtt
                }, {
                    field : ‘bailPayMoney‘,
                    title : ‘缴纳金额‘,
                    width : 80,
                    align : ‘center‘,
                }, {
                    field : ‘payWayName‘,
                    title : ‘支付方式‘,
                    width : 105,
                    align : ‘center‘,
                }, {
                    field : ‘returnBailPay‘,
                    title : ‘已退金额‘,
                    width : 80,
                    align : ‘center‘,
                    formatter : frozenFtt
                }, {
                    field : ‘canReturnBail‘,
                    title : ‘可退金额‘,
                    width : 105,
                    align : ‘center‘,
                    formatter : frozenFtt
                }, {
                    field : ‘frozenMoney‘,
                    title : ‘冻结金额‘,
                    width : 80,
                    align : ‘center‘,
                    formatter : frozenFtt
                }, {
                    field : ‘lockBailMoney‘,
                    title : ‘锁定金额‘,
                    width : 80,
                    align : ‘center‘,
                }, {
                    field : ‘payTime‘,
                    title : ‘缴纳时间‘,
                    width : 180,
                    align : ‘center‘,
                },{
                    field : ‘handlerWin‘,
                    title : ‘窗口‘,
                    width : 80,
                    align : ‘center‘,
                },{
                    field : ‘remarks‘,
                    title : ‘备注‘,
                    width : 180,
                    align : ‘center‘
                }/*, {
                    field : ‘action‘,
                    title : ‘退款金额‘,
                    width : 120,
                    align : ‘center‘,
                    formatter : returnBailFtt1
                } */] ],
                onLoadSuccess:function(){
                    $(‘#t_customerCanReturn‘).datagrid(‘selectAll‘);
                    var arr = $(‘#t_customerCanReturn‘).datagrid(‘getSelections‘);
                    if (arr.length <= 0) {
                         returnBailForAuctionsSum = 0;
                         $(‘#bailReturnSum‘).textbox(‘setValue‘,0);
                        return ;
                    } 
                    
                    returnBailForAuctionsSum = 0;
                    for (var i = 0; i < arr.length; i++) {
                        returnBailForAuctionsSum = Number(returnBailForAuctionsSum)+Number(arr[i].canReturnBail);
                    }
                    
                    $(‘#bailReturnSum‘).textbox(‘setValue‘,returnBailForAuctionsSum);
                    selectAllFlag = 1;
                },
                /*pagination : true,
                pageSize : 10,
                pageList : [ 5, 10, 15, 20, 50 ],*/
            }
    );
}


function returnBailFtt1(){
    var f = ‘<input type="text" style="width:100px;" value=""/>‘;
    
    return f;
}

 

以上是关于easyui datagrid checkbox的相关属性整理的主要内容,如果未能解决你的问题,请参考以下文章

easyui datagrid checkbox选中事件

easyui datagrid checkbox的相关属性整理

easyui datagrid editor checkbox 单击事件

jQuery EasyUI DataGrid Checkbox 数据设定与取值

jquery easyui datagrid 怎么设置checkbox列属性

easyui datagrid列设置checkbox,并能获取选中的值?如图