jqGrid在某列中添加input输入框后再操作


标签: 

jqgrid

 

it

分类: JQuery
jQuery("#listTable").jqGrid({
     url: 'queryList.do',
     datatype: 'json',
     colNames: ['','编号','姓名','输入框'],
     colModel: [
                             { 
                                 name: 'MY_ID',
                                 index: 'MY_ID',
                                 sortable: false,
                                 width: '0%',
                                 hidden:true
                             },
                             {
                                 name: 'MY_NO',
                                 index:'MY_NO',
                                 sortable: false,
                                 align:'center',
                                 width:'10%'
                             },
                           {
                                 name: 'NAME',
                                 index:'NAME',
                                 sortable: false,
                                 align:'center',
                                 width:'10%'
                           },
                           {
                               name: 'ADVICE_COUNT',
                               index: 'ADVICE_COUNT',
                               width:'22%',
                               formatter:function(cellvalue, options,  rowObject) {
                                             var un = '份';
                                             if( rowObject['MY_NO'] == 123456)
                                                     un = '本';
                                             return  rowObject['MY_ID'] + un + ' * <input type="text" 
                                                           id="tmpRadixCount-"' +  rowObject['MY_NO'] + ' name="tmpRadixCount"
                                                           value="" class="content" size="13" maxlength="10" ' +
                                                          ' οnblur="calcuMultiRadixCount(this, ' +  rowObject['MY_ID'] + ', \''
                                                           + un + '\')"   />';
                               }
                           }
                       ],
                       page: 1,
                       rowNum: 10,
                       rowList: [10, 20, 30],
                       pager: '#listPage',
                        multiselecttrue,
                       sortname: 'MY_NO',
                       viewrecords: true,
                       sortorder: "desc",
                       jsonReader: {
                               repeatitems: false
                       },
                       width: "100%",
                       height: '100%',
                       gridComplete: function() {
                               var ids = jQuery("#listTable").jqGrid(' getDataIDs');
                               for(var i=0; i<ids.length; i++) {
                                       jQuery("#listTable").jqGrid(' setRowData', ids[i], {      //修改每一行的NAME值
                                               NAME: 'shihuan_bak'
                                       });
                               }
                       }
});

$('#submitBtn').click(function(){
       var selItems = jQuery("#listTable").jqGrid(' getGridParam', ' selarrrow');
       if (selItems == "") {
               alert(" 请先选择票据记录后输入数量,再点击保存!");
               return;
       }
       for(var i=0; i<selItems.length; i++){
             var curInputObj = $('#' + selItems[i]).find("input[type=text]");
             alert($.trim(curInputObj.val()));
       }
});
可以使用 jqGrid 自带的 formatter 属性来实现操作列。首先,在 colModel 定义操作列的属性,如下: ``` { name: 'operation', index: 'operation', width: 80, sortable: false, formatter: function(_, options, row) { var editBtn = '<button type="button" class="btn btn-xs btn-default editBtn" data-rowid="' + options.rowId + '">编辑</button>'; var delBtn = '<button type="button" class="btn btn-xs btn-danger delBtn" data-rowid="' + options.rowId + '">删除</button>'; return editBtn + ' ' + delBtn; } } ``` 其,formatter 函数会接收三个参数: 1. `_`: 无意义 2. `options`: 当前单元格的一些属性,包括 rowId(行 ID)、colModel(列模型)、pos(当前单元格的左上角坐标)等等 3. `row`: 当前行的数据对象 在 formatter ,我们可以根据 options 和 row 的值来自定义单元格的显示内容,返回一个 HTML 字符串即可。 然后,在 gridComplete 事件操作列的按钮绑定事件,如下: ``` gridComplete: function() { var $grid = $(this); // 编辑按钮点击事件 $grid.find('.editBtn').on('click', function() { var rowId = $(this).data('rowid'); var rowData = $grid.jqGrid('getRowData', rowId); // TODO:显示编辑对话框,并根据 rowData 的值填充表单 }); // 删除按钮点击事件 $grid.find('.delBtn').on('click', function() { var rowId = $(this).data('rowid'); $grid.jqGrid('delRowData', rowId); }); } ``` 在 gridComplete ,我们可以利用 jqGrid 对象获取当前表格的 DOM 元素,并对其操作按钮绑定点击事件。需要注意的是,因为 jqGrid 会对表格的 DOM 结构进行修改,所以绑定事件时需要使用 $(this) 而非常规的选择器。 以上代码就可以实现在 jqGrid 添加删除按钮了。如果需要修改按钮样式,可以在 formatter 函数调整 HTML 字符串;如果需要添加更多的操作按钮,可在 formatter 和 gridComplete 添加对应的代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值