最近用到easyui,需要表格内编辑,但是我同一个页面有多个表格,把官方的代码修改了一下,如下:

HTML代码

<table id="dg" class="easyui-datagrid" style="width:100%;height:auto" data-options="singleSelect:true,collapsible:true,method:get,fitColumns:true,onClickCell: onClickCell">
<thead>
<tr>
<th data-options="field:id,width:50,align:center">ID</th>
<th data-options="field:name,width:100,align:center">名称</th>
<th data-options="field:num,width:80,align:center,editor:numberbox">数量</th>
<th data-options="field:msg,width:150,align:center">信息</th>
</tr>
</thead>
</table>

JS代码

<script>
$.extend($.fn.datagrid.methods, {
editCell: function(jq,param){
// console.log(param);// {index: 1, field: "msg"}index 行 field,点击的列
return jq.each(function(){
var opts = $(this).datagrid('options');// 表信息
var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
// console.log(fields);// ["id", "name", "num", "msg"] 列字段
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(obj){
if (editIndex == undefined){return true}
if ($(obj).datagrid('validateRow', editIndex)){
$(obj).datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickCell(index, field){
if (endEditing(this)){
var obj = $(this);
$(this).datagrid('selectRow', index).datagrid('editCell', {index:index,field:field});
editIndex = index; //获取编辑行
var editors = $(this).datagrid('getEditors', index);
var targetEditor = editors[0];
//绑定change事件并取消可编辑状态
if(targetEditor != undefined)
{
targetEditor.target.textbox({ onChange : function(){
obj.datagrid('selectRow', index).datagrid('endEdit', index);
editIndex = undefined;
}
}) } }
}
</script>

easyui,datagrid表格,行内可编辑的更多相关文章

  1. element 表格行内进行编辑

    <template> <div class="process_manage"> <el-card class="box-card" ...

  2. AppBoxPro - 细粒度通用权限管理框架(可控制表格行内按钮)源码提供下载

    特别声明: 提供的源代码已经包含了 AppBoxPro 的全部源代码,用 VS2012 打开项目后,直接 Ctrl+F5 可以运行起来(默认使用VS自带的LocalDB数据库). FineUIPro是 ...

  3. 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  4. 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  5. Easyui Datagrid rownumbers行号四位、五位显示不完全的解决办法

    Easyui Datagrid rownumbers行号四位.五位显示不完全的解决办法(引) 方法一: 相信很多人在使用easyui的时候都遇到过这个问题,当我们设置成显示Rownumber的时候,你 ...

  6. 一步步实现 easyui datagrid表格宽度自适应,效果非常好

    一步步实现 easyui datagrid表格宽度自适应,效果非常好: 一.设置公共方法,使得datagrid的属性  fitColumns:true $(function(){ //初始加载,表格宽 ...

  7. 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理

    编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...

  8. EasyUI之dataGrid的行内编辑

    $(function () { var datagrid; //定义全局变量datagrid var editRow = undefined; //定义全局变量:当前编辑的行 datagrid = T ...

  9. datatables表格行内编辑的实现

    Datatables是一款jquery表格插件,它是一个高度灵活的工具,灵活就意味着很多功能需要自己去实现,比如说行内编辑功能. Datatables自己是没有行内编辑功能的,最简单的是通过modal ...

  10. vxe-table 可编辑表格 行内编辑以及验证 element-UI集成

    <vxe-table border show-overflow ref="xTable"  ----------------------------------------- ...

随机推荐

  1. 关于:target与定位动画的奇怪现象

    今天在制作首页导航图特效demo时,无意发现一个奇怪的交互现象,故记录 经测试,简化了触发该现象的代码,如下: <!DOCTYPE html> <html> <head& ...

  2. 关于Math.round()方法

    先上结论: 1.参数的小数点后第一位<5,运算结果为参数整数部分. 2.参数的小数点后第一位>5,运算结果为参数整数部分绝对值+1,符号(+ or -)不变. 3.参数的小数点后第一位=5 ...

  3. django开发新手教程(原创)

    为了帮助新手简单高效解决django开发的问题,从而写了这么一篇,随便转载! 本人用的是windows10操作系统 #联网安装 ==指定版本号      我在自定义的www文件夹安装C:\Users\ ...

  4. dedecms织梦的不同栏目调用不同banner图的方法

    在做织梦站的时候我们会有不同的栏目,比如联系我们,产品中心等等,banner也不一样,方法如下: 我们可以使用织梦的顶级栏目ID标签,把图片命名成顶级栏目typeid ,代码如下: <img s ...

  5. 安装vue-cli

    1.路径 https://nodejs.org/en/ cmd 创建项目 1.创建一个基于 webpack 模板的新项目 vue init webpack projectname(项目名) 2.项目名 ...

  6. Go语言中Loop的注意点

    Go语言和其他语言不一样,它只有一种循环方式,就是for语句 可以参考如下公式: for initialisation; condition; post{ //Do Something } 执行顺序 ...

  7. os与sys模块

    os 1.os.pardir #获取当前目录的父目录字符串名:('..') 2.os.mkdir('dirname') #创建单级目录:相当于shell中mkdir dirname 3.os.make ...

  8. LeetCode--11_974_Subarray_Sums_Divisible_by_K

    题目链接:点击这里 public static int subarraysDivByK(int[] A, int K) { int ans = 0,sum = 0; int[] B = new int ...

  9. Floyed-Warshall【弗洛伊德算法】

    首先介绍一下有关最短路径的知识 从某顶点出发,沿图的边到达另一顶点所经过的路径中,各边上权值之和最小的一条路径叫做最短路径.解决最短路的问题有以下算法,Dijkstra算法,Bellman-Ford算 ...

  10. 重装系统windows10/8/7,绝对纯净版永久激活的详细步骤和固态硬盘找不到分区的原因

    简介:重装系统有两种: 一种是在线重装,可实现电脑双系统或多系统,也可单系统(重装在另外一个盘,再去格式化系统盘),这种方式比较麻烦,前提电脑能开机使用,但是一般能启动使用也没人去重装系统,但是不需要 ...