Jquery easyui 批量處理datagrid的資料,批量增刪改

阿新 • • 發佈：2019-01-18

Jquery easyui datagrid控制可以獲取受影響的行，從上一次的提交獲取改變的所有行。型別引數指明用哪些型別改變的行，可以使用的值有：inserted,deleted,updated等。當型別引數未配置的時候返回所有改變的行。將改變行傳到服務端，通過引數分別做批量insert update delete記錄。

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/themes/Easyui/default/easyui.css" rel="stylesheet" />
    <link href="~/themes/Easyui/icon.css" rel="stylesheet" />
    <script src="~/scripts/jquery-1.9.1.min.js"></script>
    <script src="~/scripts/jquery.easyui.min.js"></script>
    <script src="~/scripts/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
        var editIndex = undefined;
        $(function () {
            bindData();
            bindAddButton();
            bindDelButton();
            bindSaveButton();
        });

      
        function bindData() {
            $('#dg').datagrid({
                title: '部門管理',
                url: '/Home/GetBranch',
                pagination: true,
                singleSelect: true,
                rownumbers: true,
                pageNumber: 1,
                height: 420,
                pageSize: 10,
                onClickRow: onClickRow,
                pageList: [10, 15, 20, 25, 30],
                columns: [[
                    { field: 'ID', title: 'ID', hidden: true },
                    { field: 'BrcName', title: '部門名稱' ,editor:"text"},
                    { field: 'BrcComment', title: '備註', editor: "text" }
                ]],
                toolbar: '#tb'
            });
        }

        //編輯狀態
        function endEditing() {
            if (editIndex == undefined) { return true }
            if ($('#dg').datagrid('validateRow', editIndex)) {
                var ed = $('#dg').datagrid('getEditor', { index: editIndex, field: 'productid' });
                $('#dg').datagrid('endEdit', editIndex);
                editIndex = undefined;
                return true;
            } else {
                return false;
            }
        }

        //單擊某行進行編輯
        function onClickRow(index) {
            if (editIndex != index) {
                if (endEditing()) {
                    $('#dg').datagrid('selectRow', index)
                            .datagrid('beginEdit', index);
                    editIndex = index;
                } else {
                    $('#dg').datagrid('selectRow', editIndex);
                }
            }
        }

        //新增一行
        function append() {
            if (endEditing()) {
                $('#dg').datagrid('appendRow', {  });
                editIndex = $('#dg').datagrid('getRows').length - 1;
                $('#dg').datagrid('selectRow', editIndex)
                        .datagrid('beginEdit', editIndex);
            }
        }
        //刪除一行
        function remove() {
            if (editIndex == undefined) { return }
            $('#dg').datagrid('cancelEdit', editIndex)
                    .datagrid('deleteRow', editIndex);
            editIndex = undefined;
        }
        //撤銷編輯
        function reject() {
            $('#dg').datagrid('rejectChanges');
            editIndex = undefined;
        }

        //獲得編輯後的資料,並提交到後臺
        function saveChanges() {
            if (endEditing()) {
                var $dg = $('#dg');
                var rows = $dg.datagrid('getChanges');
                if (rows.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("/Home/Commit", effectRow, function (rsp) {
                if (rsp) {
                    $dg.datagrid('acceptChanges');
                    bindData();
                }
            }, "JSON").error(function () {
                $.messager.alert("提示", "提交錯誤了！");
            });

        }

        function bindSaveButton() {
            $("#saveButton").click(function () {
                saveChanges();
            });
        }
        function bindAddButton() {
            $("#addButton").click(function () {
                append();
                });
        }
        function bindDelButton() {
            $("#delButton").click(function () {
                remove();
            });
        }
    </script>
</head>
<body>
    <table id="dg">
    </table>
    <div id="tb">
        <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" id="addButton">新增</a>
        <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" id="delButton">刪除</a>
        <a href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-save'" id="saveButton">儲存</a>
    </div>
</body>
</html>


前臺程式碼

public ActionResult Commit() {
            string deleted = Request.Form["deleted"];
            string inserted = Request.Form["inserted"];
            string updated = Request.Form["updated"];
            if (deleted != null)
            {
                //把json字串轉換成物件
                List<Model.Branch> listDeleted = JsonDeserialize<List<Branch>>(deleted);
                //下面就可以根據轉換後的物件進行相應的操作了
            }

            if (inserted != null)
            {
                //把json字串轉換成物件
                List<Model.Branch> listInserted = JsonDeserialize<List<Model.Branch>>(inserted);
                //下面就可以根據轉換後的物件進行相應的操作了
            }

            if (updated != null)
            {
                //把json字串轉換成物件
                List<Branch> listUpdated = JsonDeserialize<List<Branch>>(updated);
                //
            }


MVC程式碼

原文轉自：http://www.cnblogs.com/lanyunhua/p/3285457.html

Jquery easyui 批量處理datagrid的資料,批量增刪改

Jquery easyui datagrid控制可以獲取受影響的行，從上一次的提交獲取改變的所有行。型別引數指明用哪些型別改變的行，可以使用的值有：inserted,deleted,updated等。當型別引數未配置的時候返回所有改變的行。將改變行傳到服務端，通過引數分別做批

Jquery easyui 批量處理datagrid的資料

最近用JQuery EasyUI做專案時,需要在客戶端批量處理資料,根據官方的Demo,使用json傳遞資料到後臺,後臺通過接收到的json資料,反序列化成一系列model物件,然而進行增刪查改操作.現整理如下: 1 <html> 2 <head> 3

easyui datagrid資料批量刪除

js頁面 //批量刪除 function deleteStampdef(ctx) { var selRow = $("#dg").datagrid('getSelections

Hibernate批量處理海量資料的方法(轉)

本文例項講述了Hibernate批量處理海量資料的方法。分享給大家供大家參考，具體如下： Hibernate批量處理海量其實從效能上考慮，它是很不可取的，浪費了很大的記憶體。從它的機制上講，Hibernate它是先把符合條件的資料查出來，放到記憶體當中，然後再進行操作。實際

利用jQueryEasyUI批量對資料的增刪改功能

對於Easyui相信大家都不陌生，但是對於資料的增刪改查大家都是單行操作，如果有多行資料需要進行增加，刪除，更新操作你們會選擇怎麼做的，比如對於這種情況。，估計一時半會還是有一部分童鞋想不出解決，這裡給大家提個醒，我們可以給每一行資料新增一個複選框。 e

【Django Series - 04】資料的增刪改：使用者提交資料，驗證資料的有效性並傳輸至後臺（jQuery.post）

Django Series（Django2.1.2 + Anaconda3）（一）安裝並配置 Django 環境 ||| 基於 Django 進行 Web 開發（二）Django 基礎知識：語法、教程（三）使用者管理模組：建立使用者、登入、退出（四）資料的增刪改：使用者提交資

EasyUI之移動DataGrid資料中圖片實現放大功能

最終效果滑鼠移動至圖片上，彈出預覽視窗，滑鼠移出圖片，關閉彈出視窗圖片預覽的dialog  <div id="dialog" class="easyui-dialog" title="圖片預覽" d

自定義將easyui中的datagrid資料框中的資料通過excel匯出到本地

1.js程式碼（給easyui的datagrid新增匯出excel表格的方法） //自定義匯出excel表格 $.extend($.fn.datagrid.methods, { toExcel: function(jq, filename){ ret

04】資料的增刪改：使用者提交資料，驗證資料的有效性並傳輸至後臺（jQuery.post）

Django Series（Django2.1.2 + Anaconda3）說明：本系列教程根據最近實踐過程進行整理、總結和分享。由於時間和精力有限，發表時內容分析部分可能不是很完整，後續有時間會慢慢補充。同時！！也希望感興趣的同學可以提出一些細節問題

將批量xml檔案資料批量新增…

注：前提是把sqlite的java 驅動新增到專案 package com.joke.data; import java.io.File; import java.sql.Connection; import java.sql.DriverManager; import java.sql.Prepar

Django中如何完成easyUI 表格資料的增刪改？

摘要：Django是Python中很流行的web框架，本文介紹django 中如何利用easyUI實現資料表格的增刪改系統介面： 1. 建立django應用（省略） 2. django與MySQL聯接 2.1設定資料庫在setting中

jquery 中json數組的操作增刪改

rtp class 訪問刪除長度字符 spl 常用 sort 1、數組的創建 var arrayObj = new Array();　//創建一個數組 var arrayObj = new Array([size]);　//創建一個數組並指定長度，註意不是上限，是長度

Flask中的flask_sqlalchemy模型類以及資料的增刪改查操作 | ORM對映關係 | 附知識圖

flask_sqlalchemy原理圖: ORM對映關係圖：知識圖總覽： 1-準備工作：使用模型類建立資料表並存入資料模型類如

表格資料的增刪改

html程式碼： <button id="btn">根據年齡排序</button> <table border="1"> <thead> <tr> &l

10-資料的增刪改

本節重點：插入資料 INSERT 更新資料 UPDATE 刪除資料 DELETE 再來回顧一下之前我們練過的一些操作，相信大家都對插入資料、更新資料、刪除資料有了全面的認識。那麼在mysql中其實最重要的不是這三大操作，而是查資料最重要，下節課知曉

內容迴歸(資料的增刪改)/表單查詢

一.內容回顧 1.SQL語句中的DML語言來實現資料的操作 (1).使用insert實現資料的插入 (2).update實現資料的更新 (3).使用delete實現資料的刪除 (4).使用select查詢資料 2.插入資料(INSERT) (1).插入完整資料(順序插入) 語法一:insert

mysq表的三種關係,資料的增刪改以及單表多表查詢

一丶三種關係分析步驟： #1、先站在左表的角度去找是否左表的多條記錄可以對應右表的一條記錄，如果是，則證明左表的一個欄位foreign key 右表一個欄位（通常是id） #2、再站在右表的角度去找是否右表的多條記錄可以對應左表的一條記錄，如果是，則證明右表的一個欄位

node 檔案、資料夾增刪改查

1. 資料夾增加資料夾 var fs = require("fs"); console.log("建立目錄 tmp"); fs.mkdir("tmp",function(err){ if (err) { return console.error(err)

資料操作之資料的增刪改

插入資料INSERT 1. 插入完整資料（順序插入）語法一： INSERT INTO 表名(欄位1,欄位2,欄位3…欄位n) VALUES(值1,值2,值3…值n); 語法二： INSERT INTO 表名 VALUES (值1,值2,值3…值n); 2. 指定欄位插入

在Django中對資料的增刪改查

1.增加資料 1.Entry.objects.creat(屬性=值,屬性=值) 返回值: 插入成功:則返回建立好的實體物件插入失敗:則返回None 2.建立一個save的物件,並通過save()進行儲存

Jquery easyui 批量處理datagrid的資料,批量增刪改

相關推薦