EasyUI DataGrid 编辑单元格
2016-03-13 21:36
495 查看
之前文章 EasyUI DataGrid可编辑单元格 实现可编辑单元格,如果有多列都需要可编辑 当点击一个单元格 则此整行都会进行编辑
如下图:
现改为单击某个单元格只对此单元格进行可编辑
也可以指定
小数位数:editor:{type:’numberbox’,options:{precision:1}}
文本类型:editor:’text’
checkbox:editor:{type:’checkbox’,options:{on:’启动’,off:’关闭’}}
效果如下:
如下图:
现改为单击某个单元格只对此单元格进行可编辑
<TABLE>
标记添加 onClickCell
<table id="dg" class="easyui-datagrid" data-options="onClickCell: onClickCell">
需要进行编辑的列上添加 editor
<th data-options="field:'itemId',editor:'numberbox'"></th>
也可以指定
小数位数:editor:{type:’numberbox’,options:{precision:1}}
文本类型:editor:’text’
checkbox:editor:{type:’checkbox’,options:{on:’启动’,off:’关闭’}}
效果如下:
核心代码
<script type="text/javascript"> $.extend($.fn.datagrid.methods, { editCell : function(jq, param) { return jq.each(function() { var opts = $(this).datagrid('options'); var fields = $(this).datagrid('getColumnFields', true).concat( $(this).datagrid('getColumnFields')); for ( var i = 0; i < fields.length; i++) { var col = $(this).datagrid('getColumnOption', fields[i]); col.editor1 = col.editor; if (fields[i] != param.field) { col.editor = null; } } $(this).datagrid('beginEdit', param.index); for ( var i = 0; i < fields.length; i++) { var col = $(this).datagrid('getColumnOption', fields[i]); col.editor = col.editor1; } }); } }); var editIndex = undefined; //结束编辑 function endEditing() { if (editIndex == undefined) { return true } if ($('#dg').datagrid('validateRow', editIndex)) { $('#dg').datagrid('endEdit', editIndex); editIndex = undefined; return true; } else { return false; } } //单击单元格 function onClickCell(index, field) { if (endEditing()) { $('#dg').datagrid('selectRow', index).datagrid('editCell', { index : index, field : field }); editIndex = index; } } </script>
在线演示
作者:itmyhome相关文章推荐
- iOS开发UI篇—核心动画(UIView封装动画)
- 27.UITableView初探
- 字符串的处理
- iOS开发UI篇—核心动画(转场动画和组动画)
- iOS开发UI篇—核心动画(关键帧动画)
- HDU 1423 —— Greatest Common Increasing Subsequence
- iOS开发UI篇—核心动画(基础动画)
- iOS开发UI篇—核心动画简介
- ContentResolver的四个常用方法:delete().query(),update(),insert()
- LC115 Distinct Subsequences
- leetcode:Permutation Sequence
- codeforces 3D . Least Cost Bracket Sequence 贪心
- CodeForces 622A--F - Infinite Sequence
- 用UIToolBar实现简单毛玻璃效果
- POJ1947 Rebuilding Roads(树形DP)
- stl之适配器容器——stack, queue, priority_queue
- stl之序列容器——deque
- 利用UIImageJPEGRepresentation与UIGraphicsBeginImageContext进行图片压缩的简单比较
- 优先队列(Priority Queue)
- LeetCode 之 Unique Paths