zoukankan      html  css  js  c++  java
  • easyui datagrid 批量编辑和提交

    前台主要代码:

    <script type="text/javascript">
    $(function() {
    var $dg = $("#dg");
    $dg.datagrid({
    url : "servlet/list",
    width : 700,
    height : 250,
    columns : [ [ {
    field : 'code',
    title : 'Code',
    width : 100,
    editor : "validatebox"
    }, {
    field : 'name',
    title : 'Name',
    width : 200,
    editor : "validatebox"
    }, {
    field : 'price',
    title : 'Price',
    width : 200,
    align : 'right',
    editor : "numberbox"
    } ] ],
    toolbar : [ {
    text : "添加",
    iconCls : "icon-add",
    handler : function() {
    $dg.datagrid('appendRow', {});
    var rows = $dg.datagrid('getRows');
    $dg.datagrid('beginEdit', rows.length - 1);
    }
    }, {
    text : "编辑",
    iconCls : "icon-edit",
    handler : function() {
    var row = $dg.datagrid('getSelected');
    if (row) {
    var rowIndex = $dg.datagrid('getRowIndex', row);
    $dg.datagrid('beginEdit', rowIndex);
    }
    }
    }, {
    text : "删除",
    iconCls : "icon-remove",
    handler : function() {
    var row = $dg.datagrid('getSelected');
    if (row) {
    var rowIndex = $dg.datagrid('getRowIndex', row);
    $dg.datagrid('deleteRow', rowIndex);
    }
    }
    }, {
    text : "结束编辑",
    iconCls : "icon-cancel",
    handler :endEdit
    }, {
    text : "保存",
    iconCls : "icon-save",
    handler : function() {
    endEdit();
    if ($dg.datagrid('getChanges').length) {
    var inserted = $dg.datagrid('getChanges', "inserted");
    var deleted = $dg.datagrid('getChanges', "deleted");
    var updated = $dg.datagrid('getChanges', "updated");

    var effectRow = new Object();
    if (inserted.length) {
    effectRow["inserted"] = JSON.stringify(inserted);
    }
    if (deleted.length) {
    effectRow["deleted"] = JSON.stringify(deleted);
    }
    if (updated.length) {
    effectRow["updated"] = JSON.stringify(updated);
    }

    $.post("servlet/commit", effectRow, function(rsp) {
    if(rsp.status){
    $.messager.alert("提示", "提交成功!");
    $dg.datagrid('acceptChanges');
    }
    }, "JSON").error(function() {
    $.messager.alert("提示", "提交错误了!");
    });
    }
    }
    } ]
    });

    function endEdit(){
    var rows = $dg.datagrid('getRows');
    for ( var i = 0; i < rows.length; i++) {
    $dg.datagrid('endEdit', i);
    }
    }
    });
    </script>
    <body>
    <table id="dg" title="批量操作"></table>
    </body>
    </html>

    后台commit接收类:

    //设置请求编码
    req.setCharacterEncoding("UTF-8");
    //获取编辑数据 这里获取到的是json字符串
    String deleted = req.getParameter("deleted");
    String inserted = req.getParameter("inserted");
    String updated = req.getParameter("updated");

    if(deleted != null){
    //把json字符串转换成对象
    List<Bean> listDeleted = JSON.parseArray(deleted, Bean.class);
    //TODO 下面就可以根据转换后的对象进行相应的操作了
    }

    if(inserted != null){
    //把json字符串转换成对象
    List<Bean> listInserted = JSON.parseArray(inserted, Bean.class);
    }

    if(updated != null){
    //把json字符串转换成对象
    List<Bean> listUpdated = JSON.parseArray(updated, Bean.class);
    }

     Bean.java

    public class Bean {
    private String code;
    private String name;
    private Double price;
    public String getCode() {
    return code;
    }
    public void setCode(String code) {
    this.code = code;
    }
    public String getName() {
    return name;
    }
    public void setName(String name) {
    this.name = name;
    }
    public Double getPrice() {
    return price;
    }
    public void setPrice(Double price) {
    this.price = price;
    }
    }

    JsonDeserialize方法:

    private T JsonDeserialize<T>(string jsonString)
    {
    DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(T));
    MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(jsonString));
    T obj = (T)ser.ReadObject(ms);
    return obj;
    }

    里面用到的JSON.stringify,主要是把对象转换为字符串的作用,原代码在这里

    注意下载这个js后,如果运行出错就去掉最后几行代码。如下删除

    if (!Object.prototype.toJSONString) {
    Object.prototype.toJSONString = function (filter) {
    return JSON.stringify(this, filter);
    };
    Object.prototype.parseJSON = function (filter) {
    return JSON.parse(this, filter);
    };
    }

  • 相关阅读:
    linux centos7环境下安装apache2.4+php5.6+mysql5.6 安装及踩坑集锦(二)
    linux centos7环境下安装apache2.4+php5.6+mysql5.6 安装及踩坑集锦
    C# 获取当前登录IP
    清除ios系统alert弹出框的域名
    在线文档预览示例
    lnmp1.5一键安装包安装lnmpa后,添加站点
    解决sql server2008数据库安装之后,web程序80端口被占用问题(终极方案)
    码云上传项目流程
    SQLServer2008不允许保存更改错误解决办法
    tp5 使用phpword 替换word模板并利用com组件转换pdf
  • 原文地址:https://www.cnblogs.com/andyboy/p/3203091.html
Copyright © 2011-2022 走看看