easyui,datagrid表格,行内可编辑
最近用到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表格,行内可编辑的更多相关文章
- element 表格行内进行编辑
<template> <div class="process_manage"> <el-card class="box-card" ...
- AppBoxPro - 细粒度通用权限管理框架(可控制表格行内按钮)源码提供下载
特别声明: 提供的源代码已经包含了 AppBoxPro 的全部源代码,用 VS2012 打开项目后,直接 Ctrl+F5 可以运行起来(默认使用VS自带的LocalDB数据库). FineUIPro是 ...
- 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)
客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...
- 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)
客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...
- Easyui Datagrid rownumbers行号四位、五位显示不完全的解决办法
Easyui Datagrid rownumbers行号四位.五位显示不完全的解决办法(引) 方法一: 相信很多人在使用easyui的时候都遇到过这个问题,当我们设置成显示Rownumber的时候,你 ...
- 一步步实现 easyui datagrid表格宽度自适应,效果非常好
一步步实现 easyui datagrid表格宽度自适应,效果非常好: 一.设置公共方法,使得datagrid的属性 fitColumns:true $(function(){ //初始加载,表格宽 ...
- 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理
编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...
- EasyUI之dataGrid的行内编辑
$(function () { var datagrid; //定义全局变量datagrid var editRow = undefined; //定义全局变量:当前编辑的行 datagrid = T ...
- datatables表格行内编辑的实现
Datatables是一款jquery表格插件,它是一个高度灵活的工具,灵活就意味着很多功能需要自己去实现,比如说行内编辑功能. Datatables自己是没有行内编辑功能的,最简单的是通过modal ...
- vxe-table 可编辑表格 行内编辑以及验证 element-UI集成
<vxe-table border show-overflow ref="xTable" ----------------------------------------- ...
随机推荐
- Charles(V3.10.1)的抓包以及常见功能的使用
一.Charles的安装 安装都不会,那就不用再往下看了.(*^__^*) 嘻嘻…… 二.HTTP抓包 1.查看电脑IP地址 2.设置手机的HTTP代理 手机连接到同一WiFi下设置HTTP代理: 服 ...
- STL—之迭代器,文中推荐的博客很给力
在此,不再赘述迭代器本身的意义和作用,本质上,迭代器就是一种泛型指针.但是不同的容器对应的迭代器是不同的,我们使用迭代器的时候,需要认识到: 知道迭代器的类型是一件很重要的事情. 在此,给出一个描述迭 ...
- Java的selenium代码随笔(8)
Selenium截图方法一: Selenium中截图类TakeScreenshout,这个类主要是获取浏览器窗体内的内容,不包括浏览器的菜单和桌面的任务栏区域,我们用百度首页来截图,看看截图效果. F ...
- SpringMVC model 多余字段 忽略
spring-mybaits的model中如何通过注解忽略非数据库字段?——CSDN问答频道https://ask.csdn.net/questions/643534 ObjectMapper忽略多余 ...
- Windows平台安装TensorFlow Q&A
·本文讲的是Windows平台使用原生pip进行TensorFlow(CPU版本)安装的注意事项及常见问题解决方法 ·这是TensorFlow官网的安装介绍:在 Windows 上安装 TensorF ...
- MySQL之B+树索引(转自掘金小册 MySQL是怎样运行的,版权归作者所有!)
每个索引都对应一棵B+树,B+树分为好多层,最下边一层是叶子节点,其余的是内节点.所有用户记录都存储在B+树的叶子节点,所有目录项记录都存储在内节点. InnoDB存储引擎会自动为主键(如果没有它会自 ...
- js 替换所有指定的字符串
js 的replace方法只替换第一个匹配到的的字符 如果要全局替换,使用以下方法(g为全局标志) str.replace(/需要替换的字符串/g,"新字符串") //如果有特殊符 ...
- [搬运] 将 Visual Studio 的代码片段导出到 VS Code
原文 : A Visual Studio to Visual Studio Code Snippet Converter 作者 : Rick Strahl 译者 : 张蘅水 导语 和原文作者一样,水弟 ...
- uploadify多文件上传实例--C#
下载uploadify文件 http://www.uploadify.com/ HTML(视图) <html lang="zh-cn"> <head> &l ...
- java web 三大组件
JavaWeb三大组件 Servlet,Filter,Listener. Servlet Servlet的作用 在Java web b/s架构中,servlet扮演了重要的角色,作为一个中转处理的容器 ...