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 本身的表格可以根据定义显示列信息,但是出于性能考虑不能详细的展 ...
随机推荐
- 前端(css引入的3中方式)
一.css引入的三种方式 行间式 在标签头部的style属性内 属性值满足的是css语法 属性值用key:value形式赋值,value具有单位 属性值之间用;隔开 外联式(企业开发中使用这种方式) ...
- 【我的Android进阶之旅】如何去除ListView中Header View、Footer View中的分割线
最近的项目中给ListView 加入了一个Header View之后,发现Header View的下方也有了分割线,很难看,UI要求将Header View的分割器去掉,好吧.现在就来说一说如何如何去 ...
- Kotlin开发Android笔记
外国人写的一个天气预报的例子,最后有源码下载地址,初学者可以研读一下 http://blog.csdn.net/true100/article/category/6257988 1:Kotlin介绍及 ...
- SignalTap II进阶学习
1. 多级触发 有时候我们可能需要利用多个信号(最多10个)依次触发后,观察特定的值.这这时候我们可以增加触发条件来满足我们的需求. 多个触发信号如上图所示,只有依次发生SW[0]上升沿. SW[1] ...
- Jquery 实现跨域处理
JS部分代码: $.ajax({ url:url, dataType:'jsonp', data:{title:title}, jsonp:'callback', success:function(l ...
- less本地环境输出hello-world
在学任何东西之前, 我就是有个习惯, 先搞定这个东西最最简单的使用方法. 然后在 深入学习, 毫无疑问hello-world一直是那么简单. 准备环境 较新版的高级浏览器. WAMP环境. less. ...
- iOS学习之移除Main.storyboard
每次使用Single View Application模板创建工程之后,总是会有一个Main.storyboard文件,那么,当我们使用代码布局的时候,很显然是不需要它的.那么,如何将它从工程中移除呢 ...
- python16_day03【集合、编码、函数、递归、内置函数】
一.集合 集合是一个无序的,不重复的数据组合,它的主要作用如下: 去重,把一个列表变成集合,就自动去重了 关系测试,测试两组数据之前的交集.差集.并集等关系 #创建: s = {3,5,9,10} # ...
- Apache和Nigix
Apache , Nginx 是开源的HTTP服务器软件 HTTP服务器本质上也是一种应用程序--它通常运行在服务器之上,绑定服务器的IP地址并监听某一个tcp端口来接收并处理HTTP请 ...
- BZOJ 一句话题解
菜鸡刷题记录 [题号:题解] 1008:简单排列组合 #include <bits/stdc++.h> using namespace std; #define ll long long ...