Easyui 行编辑
之前没用过,突然用了的时候手忙脚乱的感觉 找了官方文档也好 百度了一大堆东西 表示个人脑袋跟不上思路
直接铺上简化的 以后自己 找起来也方便 以下代码已经执行 应该不会再错了
<table id="dataPackageMenuList" title="套餐菜品列表" class="easyui-datagrid" style="width:100%;height:100%"
toolbar="#toolbar1" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th data-options="field:'id',hidden:true">ID</th>
<ks:listTag table="T_CATER_PACKAGEMENU" column="REMARKS"/>
<ks:listTag table="T_CATER_PACKAGEMENU" column="PACKAGEID"/>
<ks:listTag table="T_CATER_PACKAGEMENU" column="MENUID"/>
<th field="menuName" width="100px">菜品名</th>
<th field="menuPrice" width="100px">菜品价格</th>
<th field="menuNum" width="100px" data-options="editor:{type:'numberbox',options:{required:true}}">菜品数量</th> <!--需要编辑的行 --> </tr>
</thead>
</table>
JS部分
$("#dataPackageMenuList").datagrid({
onAfterEdit:function(rowIndex,rowData){
//TODO 结束行编辑
editRow = undefined;
if(rowData.menuNum != packageMenuNum){ //这个if选择性无视 业务逻辑
editPackageMenuNum.push({"id":rowData.id,"menuMum":rowData.menuNum});
}
},
onClickRow:function(rowIndex,rowData){
//TODO 触发行编辑方法
packageMenuNum = rowData.menuNum; //这个赋值也是业务逻辑 选择性无视
bookDataListRow(rowIndex);
}
});
});
//行编辑
var editRow = undefined;
function bookDataListRow(index){
if(editRow!=undefined){ //判断编辑器是否处于打开状态
var editors = $('#dataPackageMenuList').datagrid('getEditors', editRow);
$('#dataPackageMenuList').datagrid('endEdit',editRow);
}
if(editRow==undefined){
$('#dataPackageMenuList').datagrid('beginEdit',index);
editRow=index;
}
}
效果图如下


Easyui 行编辑的更多相关文章
- Jquery easyui开启行编辑模式增删改操作
Jquery easyui开启行编辑模式增删改操作 Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </ ...
- [转]Jquery easyui开启行编辑模式增删改操作
本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html ...
- EasyUI DataGrid 实现单行/多行编辑功能
要实现 EasyUI DataGrid 的可编辑很简单,在需要编辑的列添加 editor [编辑器]就可以了. 单行编辑 // 初始化数据列表 function initDatagrid() { $( ...
- 关于EasyUI DataGrid行编辑时嵌入时间控件
本人做一个名为“安徽中控”项目时,为快速开发基础数据增删改模块,遂采用EasyUIDatagrid将所有增删改查的操作都集中于表格中,并且所有增删改查操作都集中于泛型对象,从而不必为每个表写具体的增删 ...
- easyui datagrid 行编辑功能
datagrid现在具有行编辑能力了,使用时只须在columns中为需要编辑的列添加一个editor属性,编辑保存时同时具有数据校验能力. 看一个例子效果图: 代码如下: $('#tt').datag ...
- JS框架avalon简单例子 行编辑 添加 修改 删除 验证
为什么要写这个例子:做表单的时候,表单包含主子表,对于子表的编辑,使用的是easyui datagrid的行编辑功能,由于业务比较复杂,实现起来比较麻烦,代码写的也很多,因为插件的封装,无法操作原始的 ...
- 扩展jquery easyui datagrid编辑单元格
扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...
- 数据表格 - DataGrid - 行编辑
行编辑一般用于单行数据的增删改,如果不用行编辑实现的话,对于表单数据量不大的情况,可以使用弹窗(Dialog),如果数据量比较大,也就是需要操作的数据比较多的时候,可以新开一个tab页. 新增/编辑 ...
- CRM行编辑控件
原创,转载请说明出处 王红福 http://www.cnblogs.com/hellohongfu/p/4792452.html CRM 本身的表格可以根据定义显示列信息,但是出于性能考虑不能详细的展 ...
随机推荐
- UML图箭头关系
ML定义的关系主要有:泛化.实现.依赖.关联.聚合.组合,这六种关系紧密程度依次加强,分别看一下 泛化 概念:泛化是一种一般与特殊.一般与具体之间关系的描述,具体描述建立在一般描述的基础之上,并对其进 ...
- 配置YARN
1.配置yarn-site.xml(所有节点) 路径: /usr/local/hadoop-2.7.3/etc/hadoop/yarn-site.xml 配置项: <property> & ...
- HDU1069:Monkey and Banana(最长上升子序列的应用)
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1069 这题挺简单的,给定一个箱子的长宽高,要求啰箱子,但必须保证下面箱子的长和宽必须大于上面的箱子. 一个 ...
- Java io流详解二
原文地址https://www.cnblogs.com/xll1025/p/6418766.html 一.IO流概述 概述: IO流简单来说就是Input和Output流,IO流主要是用来处理设备之间 ...
- PAT 天梯赛 L1-014. 简单题 【水】
题目链接 https://www.patest.cn/contests/gplt/L1-014 AC代码 #include <iostream> #include <cstdio&g ...
- HDU 4292 Food (拆点最大流)
题意:N个人,F种食物,D种饮料,给定每种食物和饮料的量.每个人有自己喜欢的食物和饮料,如果得到自己喜欢的食物和饮料才能得到满足.求最大满足的人数. 分析:如果只是简单地N个人选择F种食物的话可以用二 ...
- poj2993
#include<stdio.h> #include<string.h> #include<algorithm> using namespace std; stru ...
- python中多重继承与获取对象
1.python中多重继承 除了从一个父类继承外,Python允许从多个父类继承,称为多重继承. 多重继承的继承链就不是一棵树了,它像这样: class A(object): def __init__ ...
- CSS3圆盘时钟
在线演示 本地下载
- 优先队列 STL (转)
优先队列是队列的一种,不过它可以按照自定义的一种方式(数据的优先级)来对队列中的数据进行动态的排序每次的push和pop操作,队列都会动态的调整,以达到我们预期的方式来存储. 例如:我们常用的操作就是 ...