EasyUI DataGrid 编辑单元格
如下图:
现改为单击某个单元格只对此单元格进行可编辑
<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>
EasyUI DataGrid 编辑单元格的更多相关文章
- 扩展jquery easyui datagrid编辑单元格
扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...
- EasyUI DataGrid编辑单元格时使用combogrid
仅提供一段columns配置代码供参考: conditions对象是一个已赋值的数组对象集合.下拉框数据可直接使用conditions数据,也可以通过url获取. columns : [[ { fie ...
- easyui datagrid单击单元格选择此列
示例代码实现单击jquery easyui datagrid的单元格时,取消datagrid默认选中高亮此行的样式,改为选中单击的单元格所在的列,高亮此列上的所有单元格.可以配置全局single变量, ...
- Easyui datagrid 扩展单元格textarea editor
datagrid 扩展单元格textarea editor by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 如下,在没有扩展的情况下,初始化如下 手 ...
- JS实现EasyUI ,Datagrid,合并单元格功能
为了实现datagrid的合并单元格效果,datagrid的数据加载方式肯定是要写在JS文件内部的. 一:在JS内部添加Datagrid数据加载方法如下: $("#id").dat ...
- EasyUI datagrid 选择单元格 出现文本框 修改 四
@disabled = "disabled", 只读属性 数据初始化 public JsonResult RateList(string dispatch_number, stri ...
- easyui datagrid 合并单元格
整理以前做的东西,这个合并单元格的问题再新浪博客也写过了..... 下面这段代码是列表数据 //载入排放系数管理报表数据 function LoadEmissionReportData() { //获 ...
- easyui datagrid 自定义单元格单击与双击事件(Day_38)
$(function(){ $('#tableId').datagrid({//单击事件 onClickRow:function(rowIndex,rowData){ alert("单 ...
- 获取wpf datagrid当前被编辑单元格的内容
原文 获取wpf datagrid当前被编辑单元格的内容 确认修改单元个的值, 使用到datagrid的两个事件 开始编辑事件 BeginningEdit="dataGrid_Beginni ...
随机推荐
- 更改Mysql数据库存储位置
默认安装位置 C:\Program Files\MySQL\MySQL Server 5.7 一.首先把mysql的服务先停掉. 二.更改MySQL配置文件My.ini中的数据库存储主路径 打开MyS ...
- Microsoft.VisualStudio.DebuggerVisualizers.dll 文件位置 for VisualStudio 2015
可视化调试工具(Microsoft.VisualStudio.DebuggerVisualizers) "C:\Program Files (x86)\Microsoft Visual St ...
- 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)如何修改标准驱动器编码器分辨率
在某个轴的Enc上双击,可以修改Scaling Factor Numerator 更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i.youku.com/acetao ...
- 如何系统掌握游戏编程中3D图形学相关的基础?
https://www.zhihu.com/question/27544895 三维几何学基础:三维坐标系统点与矢量矩阵与几何变换四元数与三维旋转
- JMeter 十:录制脚本--使用bodboy
1. 下载bodboy 下载地址:http://www.badboy.com.au/download 这里填写完基本信息,点击下方的Continue即可跳转到下载页面. 任选一个version,点击后 ...
- LoadRunner录制: 选择协议
LR录制的时候关心的是通信,关心的是客户端和服务器之间的数据包.它通过监控客户端和服务器之间的通信,转化为自己的函数. 协议选择错误,可能会导致录制下来的内容为空. 方法一:根据经验来选择协议 Web ...
- vue - webpack.dev.conf.js for FriendlyErrorsPlugin
描述:webpack网页端友好的报错信息就来自它 官网:https://www.npmjs.com/package/friendly-errors-webpack-plugin new Friendl ...
- 七个你无法忽视的Git使用技巧
与其他技术相比,Git应该拯救了更多开发人员的饭碗.只要你经常使用Git保存自己的工作,你就一直有机会可以将代码退回到之前的状态,因此就可以挽回那些你深夜里迷迷糊糊犯下的错误. 尽管这么说,Git的命 ...
- AngularJS监听DOM加载完毕
直接上代码: Module.directive('renderFinish', function ($timeout) { //renderFinish自定义指令 return { restrict: ...
- SpringMVC响应Restful风格请求404
在学习Springmvc时,使用Restful风格的url,页面提示404错误.为找到原因,编写一个简单的Restful测试用例如下: jsp页面: <a href="user/tes ...