JQuery EasyUI datagrid 批量編輯和提交

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

<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>

JQuery EasyUI datagrid 批量編輯和提交

easyui datagrid 批量編輯和提交並改變修改過單元格的顏色

//首先我們需要一下工具方法 //為陣列新增一些方法 //去重 Array.prototype.unique = function() { this.sort(); var re = [ this[0] ]; for (var

jQuery easyui dataGrid 動態改變排序欄位名，一般情況下，在使用的時候，我們會點選相應欄位進行排序，這裡以JAVA為例，後端的實體類欄位有可能和資料庫的欄位不一致；如：實體類中的

jQuery easyui dataGrid 動態改變排序欄位名，一般情況下，在使用的時候，我們會點選相應欄位進行排序，這裡以JAVA為例，後端的實體類欄位有可能和資料庫的欄位不一致；如：實體類中的屬性為userName,前臺filed="userName"而資料庫的欄位

js--easyUI----jQuery easyui datagrid 點選某個單元格即進入編輯狀態，焦點移開後，儲存資料

以上為轉載內容，以下為自己驗證程式碼： function _createTable(data){ //對漢字進行轉碼 $.each(data.data, function(i, obj){ var eventName = unescape(ob

動態控制jQuery easyui datagrid工具欄顯示隱藏

第一條 button 一個按鈕 yui query 控制 show disable //隱藏第一個按鈕 $(‘div.datagrid-toolbar a‘).eq(0).hide(); //隱藏第一條分隔線 $(‘div.datagrid-toolbar div‘).e

jQuery EasyUI---DataGrid

ebo out xmlns tar utf select 基本 yui round <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DataGrid</t

jquery easyui datagrid 無滾動條，datagrid 沒垂直滾動條

p s load grid 技術如果 fan 垂直滾動條收藏解決 jquery easyui datagrid 無滾動條，datagrid 沒垂直滾動條 ============================== 蕃薯耀 2018年2月6日 http://www

jquery easyui datagrid實現數據改動

art 圖片 statistic sta mod b2c tracking tex grid 1、單擊選中待改動行2、使用單獨對話框改動數據3、使用updateRow

jquery easyui datagrid/table 右邊線顯示不全

eight AI 分享 inf jquer alt 顯示 col info <table id="dg" style="height:400px"></table> 右邊線顯示不全解決：在外面套一個panel，邊框隱藏：border:hidden

jquery-easyUi datagrid 基本用法

首先引入相應的css 和jq 指令碼 <link href="css/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="css/themes/icon.css"

jquery easyui datagrid columns日期格式化問題

使用easyui的datagrid，從後端返回的json字串中的日期，直接賦值到createtime這個column時，出現了錯誤顯示。顯示的樣子是：[object Object]。明顯是一個物件，使用formatter做了格式化後， { &nbs

jquery easyui-datagrid 如何清空資料

//清空原有資料方法1： var item = $('#filegrid').datagrid('getRows'); if (item) { for (var i = item.length - 1; i >= 0; i--

jQuery EasyUI Datagrid元件的完整的基礎DOM結構

　　標題可能有點長，什麼叫“完整的基礎DOM結構”，這裡“基礎”的意思是指這個結構不依賴具體資料，不依賴Datagrid的view屬性，只要存在Datagrid例項就會存在這樣的基礎DOM結構；而“完整”的意思是指在凍結列，凍結行，標題，footer，分頁這些功能塊都存在時候的DOM結構。

jQuery EasyUI Datagrid效能優化專題

文章目錄 1慢在哪些方面 2大資料量的載入 2.1原因分析 2.2解決方案一：返璞歸真 2.3解決方案二：使用scroll檢視 3勾選和點選

easyui datagrid可編輯表格使用經驗分享

文章目錄 1相關介面方法 2列屬性formatter 3編輯器型別 3.1基於my97的編輯器 3.2簡單的密碼編輯器 3.3動態增加/刪除編輯器

JQuery EasyUI DataGrid 程式設計經驗

原創地址：http://xiaomao870311.blog.51cto.com/1458701/384400 最近，在專案中用到JQuery EasyUI DataGrid，雖然它封裝了表格的實現，為我們提供很多便利，但是在使用的過程中，還是會遇到一些困難和問題。目前，問題都已經解決，特分

easyui datagrid 基礎方法和事件

--------------------- 本文來自 kopess 的CSDN 部落格，全文地址請點選：https://blog.csdn.net/yeyingss/article/details/52955010?utm_source=copy 資料表格屬性（DataG

JQuery easyUI datagrid 排序，使用sorter自定義排序

jQuery easyUI datagrid 排序的使用和例項 1.設定remoteSort（注：此屬性預設為true，如果如果是對本地資料排序必須設定為false） 2.設定列的sortable屬性 jquery easyUI datagrid 排序的例項 ? 1 2 3 4

專案總結—jQuery EasyUI- DataGrid使用

概要 jQuery EasyUI是一個基於jquery的集成了各種使用者介面的框架,使用easyui我們不需要寫太多javascript程式碼，一般情況下我們只需要使用一些html標記來定義使用者介面,easyui將我們需要的功能都已經封裝好了,我們只要來呼叫easyu

jquery easyui dataGrid動態改變排序欄位名

jquery easyui dataGrid 動態改變排序欄位名，一般情況下，在使用的時候，我們會點選相應欄位進行排序，這裡以JAVA為例，後端的實體類欄位有可能和資料庫的欄位不一致；如：實體類中的屬性為userName,前臺filed="userName"而資料庫的欄

JQuery EasyUI datagrid 批量編輯和提交

相關推薦