easyUI datagrid可编辑行JS代码片段总结
2016-06-06 11:19
405 查看
关于easyUI datagrid可编辑行在官方的demo中有具体的demo,可以参看。我这里是独立出来的JS代码片段,仅供参考。
function loadGrid() { var toolbar = $('#datagrid') .datagrid( { iconCls : 'icon-list', title : '提交结果', url : '/action!getmentJsonList.jspa?', loadMsg : '数据远程载入中,请等待...', singleSelect : false, pagination : true, nowrap : true, height : height, striped : true, columns : [ [ { field : 'applyYear', title : '年', width : setColumnWidth(0.05), align : 'center', editor: { type:'numberbox', options:{ required : true } } }, { field : 'applyMonth', title : '月', width : setColumnWidth(0.05), align : 'center', editor: { type:'numberbox', options:{ required : true } } }, { field : 'target', title : '目标量', width : setColumnWidth(0.12), align : 'center', editor: { type:'text', options:{ min:0, precision:0, required : true } } } ] ], toolbar : [ "-", { text : '删除选择行', iconCls : 'icon-remove', handler : function() { removeit(); } }, "-", { text : '保存修改', iconCls : 'icon-save', handler : function() { accept(); } }, "-", /**将以下所需要的函数依次的添加到此处即可**/], onClickRow: onClickRow }); // 分页控件 /*var p = $('#datagrid').datagrid('getPager'); $(p).pagination({ pageSize : 10, pageList : [ 10, 50, 100 ], beforePageText : '第', afterPageText : '页 共 {pages} 页', displayMsg : '当前显示 {from} - {to} 条记录 共 {total} 条记录' });*/ }
var editIndex = undefined; function endEditing(){ if (editIndex == undefined){return true} if ($('#datagrid').datagrid('validateRow', editIndex)){ $('#datagrid').datagrid('getRows')[editIndex]['applyYear'] = applyYear; $('#datagrid').datagrid('getRows')[editIndex]['applyMonth'] = applyMonth; $('#datagrid').datagrid('endEdit', editIndex); editIndex = undefined; return true; } else { return false; } } function onClickRow(index){ if (editIndex != index){ if (endEditing()){ $('#dg').datagrid('selectRow', index) .datagrid('beginEdit', index); editIndex = index; } else { $('#dg').datagrid('selectRow', editIndex); } } } function append(){ if (endEditing()){ $('#dg').datagrid('appendRow',{status:'P'}); editIndex = $('#dg').datagrid('getRows').length-1; $('#dg').datagrid('selectRow', editIndex) .datagrid('beginEdit', editIndex); } } function removeit(){ if (editIndex == undefined){return} $('#dg').datagrid('cancelEdit', editIndex) .datagrid('deleteRow', editIndex); editIndex = undefined; } function accept(){ if (endEditing()){ $('#dg').datagrid('acceptChanges'); } } function reject(){ $('#dg').datagrid('rejectChanges'); editIndex = undefined; } function getChanges(){ var rows = $('#dg').datagrid('getChanges'); alert(rows.length+' rows are changed!'); }
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- easyui------显示隐藏列功能
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解