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:‘numberbox‘">菜品数量</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;
            }
        }

效果图如下

时间: 2024-10-08 17:06:16

Easyui 行编辑的相关文章

easyui行编辑:利用append row添加行,直接在行中编辑,ajax提交保存

今天工作用到了easyui行编辑,在这里总结一下,不会的同学可以看看,顺便吐槽一下,网上的很多博客都是粘贴复制的,内容很乱 ,而且看不懂,不知道这些粘贴复制的怀的是什么心,不但没用,还影响别人搜索. 呼吁大家在写博客的时候认真一些,别只粘贴复制,至少可以自己运行好了贴上自己的代码和一点感想,对别人用处很大的. 好了,正题开始--> 我用的是easyui 1.4 效果如下: 点击添加按钮,在第二行的位置添加新行,点击单元格输入内容,点保存通过ajax提交. 修改则直接点击单元格修改,点保存提交.

Jquery easyui开启行编辑模式增删改操作

来源:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </table> 引入JS文件和CSS样式 <script src="http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/jquery-1.4.4.min.js

[转]Jquery easyui开启行编辑模式增删改操作

本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </table> 引入JS文件和CSS样式 <script src="http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/jquery-1.4.4.min.

SpringMVC+easyUI中datagrid行编辑模式(添加数据)实现_2014.5.2

一.概述 根据我们平常的习惯,一共有两种修改模式,一种是弹窗是修改,将原有的数据提取到dialog上,然后再重新提交到后台(好像easyui里面有个onAfterEdit,这个事件里面有三个参数,其中的一个参数就是发现数据是否有改变),而第二种方式就是实现行编辑模式,在原有的datagrid上添加一个空行,(本例是实现添加数据,不考虑原有数据). 二.实现 1.后台就不赘言了.直接上代码,但是我还是有个疑问,对于SpingMVC的Controller层次中的方法的**入参**,我在前台通过aja

Jquery easyui开启行编辑_增删改操作及新增就能编辑

下面这个是一个单独的js文件,可以直接在页面引入他就可以用了 主要有三种方式实现编辑模式增删改操作 1.直接双击选中编辑 2.选中行点击修改按钮编辑 3.右键选择相关的操作 可能中间有部分功能没有实现 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!-- 引入自定义的js文件 --> <script type="t

datagrid行编辑如何实现级联?

还是级联的问题,不过这一次,是在datagrid里,那么难度上肯定比form中的级联要高. 但是只要熟练掌握了datagrid的API,问题还是很容易就可以解决的. 关键点在于--editor,关于datagrid实现编辑功能全要靠它. 先实现行编辑 比如在datagrid中要实现某一列可编辑,那么需要在那一列的column中配置editor属性 editor的配置可以只指定type,也就是编辑框的类型,可以是combobox,datebox等easyUI配备的一些类型 若对这些编辑框有额外的属

(四)Web应用开发---查询Grid显示、行编辑

查询Grid显示.行编辑,UI设计类如 Copy html代码到新建Html <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>资产日常管理&l

GTK常用控件之行编辑( GtkEntry )

行编辑,只允许输入一行内容的控件,如密码输入框. 行编辑的创建: GtkWidget *gtk_entry_new(void); 返回值:行编辑指针 设置行编辑内容的最大长度: void gtk_entry_set_max_length(GtkEntry *entry, gint max); entry:行编辑 max:长度的最大值,这里填0代表长度不作限制 设置行编辑的文本内容: void gtk_entry_set_text(GtkEntry *entry, const gchar *tex

Bash命令行编辑

1.Readline库和命令行编辑 bash shell提供了两个内置编辑器:emacs和vi,利用它们可以以交互模式对命令行列表进行编辑,这项特性是通过Readline库的软件包实现的.当使用命令行编辑功能时,无论是vi还是emacs模式,都是readline的函数决定哪一个键对应哪一项功能.例如,使用emacs模式,则Ctrl-P允许在历史列表中向上滚动. 2.设置命令行编辑器 内置emacs编辑器是默认的内置编辑器.#set -o vi //设置vi为命令行编辑器 #set -o emac