码迷，mamicode.com
首页 > 其他好文 > 详细

easyUI datagrid

时间：2016-08-06 08:31:13      阅读：343      评论：0      收藏：0      [点我收藏+]

标签：

官网 http://www.jeasyui.com/

文档 http://www.jeasyui.com/documentation/index.php

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
└─easyui
    │  jquery.easyui.min.js
    │  jquery.min.js
    │
    ├─demo
    │  └─datagrid
    └─themes
        │  icon.css
        │
        ├─default
        │  │  easyui.css
        │  │
        │  └─images
        └─icons

demo

技术分享 
#case# 
使用Chrome浏览器时，demo不能显示数据，查看Console

#reason#
XMLHttpRequest cannot load file:///...../js/easyui/demo/datagrid/datagrid_data1.json. 
Received an invalid response. 
Origin ‘null‘ is therefore not allowed access. 

#ps#
谷歌浏览器默认禁止本地浏览时加载本地其他文件

#so#
添加启动参数
cmd
chrome.exe --allow-file-access-from-files

#快捷方式#
chrome快捷方式-属性-目标[此处路径省略\chrome.exe --allow-file-access-from-files]
or 目标["此处路径省略\chrome.exe" --allow-file-access-from-files]

#备注#
命令和参数之间需要空格
Chrome浏览器无法显示数据的处理

1. 基础表格

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Basic DataGrid</h2>
    <p>The DataGrid is created from markup, no JavaScript code needed.</p>
    <div style="margin:20px 0;"></div>
    
    <table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
            data-options="singleSelect:true,collapsible:true,url:‘datagrid_data1.json‘,method:‘get‘">
        <thead>
            <tr>
                <th data-options="field:‘itemid‘,width:80">Item ID</th>
                <th data-options="field:‘productid‘,width:100">Product</th>
                <th data-options="field:‘listprice‘,width:80,align:‘right‘">List Price</th>
                <th data-options="field:‘unitcost‘,width:80,align:‘right‘">Unit Cost</th>
                <th data-options="field:‘attr1‘,width:250">Attribute</th>
                <th data-options="field:‘status‘,width:60,align:‘center‘">Status</th>
            </tr>
        </thead>
    </table>

</body>
</html>
basic.html

2. 普通表格转成DataGrid

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Transform DataGrid from Table - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Transform DataGrid from Table</h2>
    <p>Transform DataGrid from an existing, unformatted html table.</p>
    <div style="margin:20px 0;">
        <a href="#" class="easyui-linkbutton" onclick="javascript:$(‘#dg‘).datagrid()">Transform</a>
    </div>
    <table id="dg" style="width:700px;height:auto;border:1px solid #ccc;">
        <thead>
            <tr>
                <th data-options="field:‘itemid‘">Item ID</th>
                <th data-options="field:‘productid‘">Product</th>
                <th data-options="field:‘listprice‘,align:‘right‘">List Price</th>
                <th data-options="field:‘attr1‘">Attribute</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>EST-1</td><td>FI-SW-01</td><td>36.50</td><td>Large</td>
            </tr>
            <tr>
                <td>EST-10</td><td>K9-DL-01</td><td>18.50</td><td>Spotted Adult Female</td>
            </tr>
            <tr>
                <td>EST-11</td><td>RP-SN-01</td><td>28.50</td><td>Venomless</td>
            </tr>
            <tr>
                <td>EST-12</td><td>RP-SN-01</td><td>26.50</td><td>Rattleless</td>
            </tr>
            <tr>
                <td>EST-13</td><td>RP-LI-02</td><td>35.50</td><td>Green Adult</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
transform.html

3. 分页显示

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Client Side Pagination in DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Client Side Pagination in DataGrid</h2>
    <p>This sample shows how to implement client side pagination in DataGrid.</p>
    <div style="margin:20px 0;"></div>
    
    <table id="dg" title="Client Side Pagination" style="width:700px;height:300px" data-options="
                rownumbers:true,
                singleSelect:true,
                autoRowHeight:false,
                pagination:true,
                pageSize1:10">
        <thead>
            <tr>
                <th field="inv" width="80">Inv No</th>
                <th field="date" width="100">Date</th>
                <th field="name" width="80">Name</th>
                <th field="amount" width="80" align="right">Amount</th>
                <th field="price" width="80" align="right">Price</th>
                <th field="cost" width="100" align="right">Cost</th>
                <th field="note" width="110">Note</th>
            </tr>
        </thead>
    </table>
    <script>
        (function($){
            function pagerFilter(data){
                if ($.isArray(data)){    // is array
                    data = {
                        total: data.length,
                        rows: data
                    }
                }
                var dg = $(this);
                var state = dg.data(‘datagrid‘);
                var opts = dg.datagrid(‘options‘);
                if (!state.allRows){
                    state.allRows = (data.rows);
                }
                var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
                var end = start + parseInt(opts.pageSize);
                data.rows = $.extend(true,[],state.allRows.slice(start, end));
                return data;
            }

            var loadDataMethod = $.fn.datagrid.methods.loadData;
            $.extend($.fn.datagrid.methods, {
                clientPaging: function(jq){
                    return jq.each(function(){
                        var dg = $(this);
                        var state = dg.data(‘datagrid‘);
                        var opts = state.options;
                        opts.loadFilter = pagerFilter;
                        var onBeforeLoad = opts.onBeforeLoad;
                        opts.onBeforeLoad = function(param){
                            state.allRows = null;
                            return onBeforeLoad.call(this, param);
                        }
                        dg.datagrid(‘getPager‘).pagination({
                            onSelectPage:function(pageNum, pageSize){
                                opts.pageNumber = pageNum;
                                opts.pageSize = pageSize;
                                $(this).pagination(‘refresh‘,{
                                    pageNumber:pageNum,
                                    pageSize:pageSize
                                });
                                dg.datagrid(‘loadData‘,state.allRows);
                            }
                        });
                        $(this).datagrid(‘loadData‘, state.data);
                        if (opts.url){
                            $(this).datagrid(‘reload‘);
                        }
                    });
                },
                loadData: function(jq, data){
                    jq.each(function(){
                        $(this).data(‘datagrid‘).allRows = null;
                    });
                    return loadDataMethod.call($.fn.datagrid.methods, jq, data);
                },
                getAllRows: function(jq){
                    return jq.data(‘datagrid‘).allRows;
                }
            })
        })(jQuery);

        function getData(){
            var rows = [];
            for(var i=1; i<=800; i++){
                var amount = Math.floor(Math.random()*1000);
                var price = Math.floor(Math.random()*1000);
                rows.push({
                    inv: ‘Inv No ‘+i,
                    date: $.fn.datebox.defaults.formatter(new Date()),
                    name: ‘Name ‘+i,
                    amount: amount,
                    price: price,
                    cost: amount*price,
                    note: ‘Note ‘+i
                });
            }
            return rows;
        }
        
        $(function(){
            $(‘#dg‘).datagrid({data:getData()}).datagrid(‘clientPaging‘);
        });
    </script>
</body>
</html>
clientpagination.html

4. 定制分页显示

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Custom DataGrid Pager - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Custom DataGrid Pager</h2>
    <p>You can append some buttons to the standard datagrid pager bar.</p>
    <div style="margin:20px 0;"></div>
    <table id="dg" title="Custom DataGrid Pager" style="width:700px;height:250px"
            data-options="rownumbers:true,singleSelect:true,pagination:true,url:‘datagrid_data1.json‘,method:‘get‘">
        <thead>
            <tr>
                <th data-options="field:‘itemid‘,width:80">Item ID</th>
                <th data-options="field:‘productid‘,width:100">Product</th>
                <th data-options="field:‘listprice‘,width:80,align:‘right‘">List Price</th>
                <th data-options="field:‘unitcost‘,width:80,align:‘right‘">Unit Cost</th>
                <th data-options="field:‘attr1‘,width:240">Attribute</th>
                <th data-options="field:‘status‘,width:60,align:‘center‘">Status</th>
            </tr>
        </thead>
    </table>
    <script type="text/javascript">
        $(function(){
            var pager = $(‘#dg‘).datagrid().datagrid(‘getPager‘);    // get the pager of datagrid
            pager.pagination({
                buttons:[{
                    iconCls:‘icon-search‘,
                    handler:function(){
                        alert(‘search‘);
                    }
                },{
                    iconCls:‘icon-add‘,
                    handler:function(){
                        alert(‘add‘);
                    }
                },{
                    iconCls:‘icon-edit‘,
                    handler:function(){
                        alert(‘edit‘);
                    }
                }]
            });            
        })
    </script>
</body>
</html>
custompager.html

5. 工具栏

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DataGrid with Toolbar - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>DataGrid with Toolbar</h2>
    <p>Put buttons on top toolbar of DataGrid.</p>
    <div style="margin:20px 0;"></div>
    <table class="easyui-datagrid" title="DataGrid with Toolbar" style="width:700px;height:250px"
            data-options="rownumbers:true,singleSelect:true,url:‘datagrid_data1.json‘,method:‘get‘,toolbar:toolbar">
        <thead>
            <tr>
                <th data-options="field:‘itemid‘,width:80">Item ID</th>
                <th data-options="field:‘productid‘,width:100">Product</th>
                <th data-options="field:‘listprice‘,width:80,align:‘right‘">List Price</th>
                <th data-options="field:‘unitcost‘,width:80,align:‘right‘">Unit Cost</th>
                <th data-options="field:‘attr1‘,width:240">Attribute</th>
                <th data-options="field:‘status‘,width:60,align:‘center‘">Status</th>
            </tr>
        </thead>
    </table>
    <script type="text/javascript">
        var toolbar = [{
            text:‘Add‘,
            iconCls:‘icon-add‘,
            handler:function(){alert(‘add‘)}
        },{
            text:‘Cut‘,
            iconCls:‘icon-cut‘,
            handler:function(){alert(‘cut‘)}
        },‘-‘,{
            text:‘Save‘,
            iconCls:‘icon-save‘,
            handler:function(){alert(‘save‘)}
        }];
    </script>
</body>
</html>
simpletoolbar.html

6. 混合的工具栏

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DataGrid Complex Toolbar - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>DataGrid Complex Toolbar</h2>
    <p>The DataGrid toolbar can be defined from a &lt;div&gt; markup, so you can define the layout of toolbar easily.</p>
    <div style="margin:20px 0;"></div>
    <table class="easyui-datagrid" title="DataGrid Complex Toolbar" style="width:700px;height:250px"
            data-options="rownumbers:true,singleSelect:true,url:‘datagrid_data1.json‘,method:‘get‘,toolbar:‘#tb‘,footer:‘#ft‘">
        <thead>
            <tr>
                <th data-options="field:‘itemid‘,width:80">Item ID</th>
                <th data-options="field:‘productid‘,width:100">Product</th>
                <th data-options="field:‘listprice‘,width:80,align:‘right‘">List Price</th>
                <th data-options="field:‘unitcost‘,width:80,align:‘right‘">Unit Cost</th>
                <th data-options="field:‘attr1‘,width:240">Attribute</th>
                <th data-options="field:‘status‘,width:60,align:‘center‘">Status</th>
            </tr>
        </thead>
    </table>
    <div id="tb" style="padding:2px 5px;">
        Date From: <input class="easyui-datebox" style="width:110px">
        To: <input class="easyui-datebox" style="width:110px">
        Language: 
        <select class="easyui-combobox" panelHeight="auto" style="width:100px">
            <option value="java">Java</option>
            <option value="c">C</option>
            <option value="basic">Basic</option>
            <option value="perl">Perl</option>
            <option value="python">Python</option>
        </select>
        <a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
    </div>
    <div id="ft" style="padding:2px 5px;">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
    </div>
</body>
</html>
complextoolbar.html

7. 页脚

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Footer Rows in DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Footer Rows in DataGrid</h2>
    <p>The summary informations can be displayed in footer rows.</p>
    <div style="margin:20px 0;"></div>
    <table class="easyui-datagrid" title="Footer Rows in DataGrid" style="width:700px;height:220px"
            data-options="
                url: ‘datagrid_data2.json‘,
                method: ‘get‘,
                fitColumns: true,
                singleSelect: true,
                rownumbers: true,
                showFooter: true
            ">
        <thead>
            <tr>
                <th data-options="field:‘itemid‘,width:80">Item ID</th>
                <th data-options="field:‘productid‘,width:120">Product ID</th>
                <th data-options="field:‘listprice‘,width:80,align:‘right‘">List Price</th>
                <th data-options="field:‘unitcost‘,width:80,align:‘right‘">Unit Cost</th>
                <th data-options="field:‘attr1‘,width:250">Attribute</th>
                <th data-options="field:‘status‘,width:60,align:‘center‘">Status</th>
            </tr>
        </thead>
    </table>

</body>
</html>
footer.html

8. 上下文菜单（显示/隐藏列）

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Context Menu on DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Context Menu on DataGrid</h2>
    <p>Right click on the header of DataGrid to display context menu.</p>
    <div style="margin:20px 0;"></div>
    <table id="dg"></table>
    <script type="text/javascript">
        $(function(){
            $(‘#dg‘).datagrid({
                url: ‘datagrid_data1.json‘,
                method: ‘get‘,
                title: ‘Context Menu on DataGrid‘,
                iconCls: ‘icon-save‘,
                width: 700,
                height: 250,
                fitColumns: true,
                singleSelect: true,
                columns:[[
                    {field:‘itemid‘,title:‘Item ID‘,width:80},
                    {field:‘productid‘,title:‘Product ID‘,width:120},
                    {field:‘listprice‘,title:‘List Price‘,width:80,align:‘right‘},
                    {field:‘unitcost‘,title:‘Unit Cost‘,width:80,align:‘right‘},
                    {field:‘attr1‘,title:‘Attribute‘,width:250},
                    {field:‘status‘,title:‘Status‘,width:60,align:‘center‘}
                ]],
                onHeaderContextMenu: function(e, field){
                    e.preventDefault();
                    if (!cmenu){
                        createColumnMenu();
                    }
                    cmenu.menu(‘show‘, {
                        left:e.pageX,
                        top:e.pageY
                    });
                }
            });
        });
        var cmenu;
        function createColumnMenu(){
            cmenu = $(‘<div/>‘).appendTo(‘body‘);
            cmenu.menu({
                onClick: function(item){
                    if (item.iconCls == ‘icon-ok‘){
                        $(‘#dg‘).datagrid(‘hideColumn‘, item.name);
                        cmenu.menu(‘setIcon‘, {
                            target: item.target,
                            iconCls: ‘icon-empty‘
                        });
                    } else {
                        $(‘#dg‘).datagrid(‘showColumn‘, item.name);
                        cmenu.menu(‘setIcon‘, {
                            target: item.target,
                            iconCls: ‘icon-ok‘
                        });
                    }
                }
            });
            var fields = $(‘#dg‘).datagrid(‘getColumnFields‘);
            for(var i=0; i<fields.length; i++){
                var field = fields[i];
                var col = $(‘#dg‘).datagrid(‘getColumnOption‘, field);
                cmenu.menu(‘appendItem‘, {
                    text: col.title,
                    name: field,
                    iconCls: ‘icon-ok‘
                });
            }
        }
    </script>
</body>
</html>
contextmenu.html

9. 行数据选取

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DataGrid Selection - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>DataGrid Selection</h2>
    <p>Choose a selection mode and select one or more rows.</p>
    <div style="margin:20px 0;">
        <a href="#" class="easyui-linkbutton" onclick="getSelected()">GetSelected</a>
        <a href="#" class="easyui-linkbutton" onclick="getSelections()">GetSelections</a>
    </div>
    <table id="dg" class="easyui-datagrid" title="DataGrid Selection" style="width:700px;height:250px"
            data-options="singleSelect:true,url:‘datagrid_data1.json‘,method:‘get‘">
        <thead>
            <tr>
                <th data-options="field:‘itemid‘,width:80">Item ID</th>
                <th data-options="field:‘productid‘,width:100">Product</th>
                <th data-options="field:‘listprice‘,width:80,align:‘right‘">List Price</th>
                <th data-options="field:‘unitcost‘,width:80,align:‘right‘">Unit Cost</th>
                <th data-options="field:‘attr1‘,width:250">Attribute</th>
                <th data-options="field:‘status‘,width:60,align:‘center‘">Status</th>
            </tr>
        </thead>
    </table>
    <div style="margin:10px 0;">
        <span>Selection Mode: </span>
        <select onchange="$(‘#dg‘).datagrid({singleSelect:(this.value==0)})">
            <option value="0">Single Row</option>
            <option value="1">Multiple Rows</option>
        </select>
    </div>
    <script type="text/javascript">
        function getSelected(){
            var row = $(‘#dg‘).datagrid(‘getSelected‘);
            if (row){
                $.messager.alert(‘Info‘, row.itemid+":"+row.productid+":"+row.attr1);
            }
        }
        function getSelections(){
            var ss = [];
            var rows = $(‘#dg‘).datagrid(‘getSelections‘);
            for(var i=0; i<rows.length; i++){
                var row = rows[i];
                ss.push(‘<span>‘+row.itemid+":"+row.productid+":"+row.attr1+‘</span>‘);
            }
            $.messager.alert(‘Info‘, ss.join(‘<br/>‘));
        }
    </script>
</body>
</html>
selection.html

10. checkbox时选中行或者选中行时checkbox

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CheckBox Selection on DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>CheckBox Selection on DataGrid</h2>
    <p>Click the checkbox on header to select or unselect all selections.</p>
    <div style="margin:20px 0;"></div>
    
    <table id="dg" class="easyui-datagrid" title="CheckBox Selection on DataGrid" style="width:700px;height:250px"
            data-options="rownumbers:true,singleSelect:true,url:‘datagrid_data1.json‘,method:‘get‘">
        <thead>
            <tr>
                <th data-options="field:‘ck‘,checkbox:true"></th>
                <th data-options="field:‘itemid‘,width:80">Item ID</th>
                <th data-options="field:‘productid‘,width:100">Product</th>
                <th data-options="field:‘listprice‘,width:80,align:‘right‘">List Price</th>
                <th data-options="field:‘unitcost‘,width:80,align:‘right‘">Unit Cost</th>
                <th data-options="field:‘attr1‘,width:220">Attribute</th>
                <th data-options="field:‘status‘,width:60,align:‘center‘">Status</th>
            </tr>
        </thead>
    </table>
    <div style="margin:10px 0;">
        <span>Selection Mode: </span>
        <select onchange="$(‘#dg‘).datagrid({singleSelect:(this.value==0)})">
            <option value="0">Single Row</option>
            <option value="1">Multiple Rows</option>
        </select><br/>
        SelectOnCheck: <input type="checkbox" checked onchange="$(‘#dg‘).datagrid({selectOnCheck:$(this).is(‘:checked‘)})"><br/>
        CheckOnSelect: <input type="checkbox" checked onchange="$(‘#dg‘).datagrid({checkOnSelect:$(this).is(‘:checked‘)})">
    </div>

</body>
</html>
checkbox.html

11. 行的样式

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DataGrid Row Style - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>DataGrid Row Style</h2>
    <p>The rows which listprice value is less than 30 are highlighted.</p>
    <div style="margin:20px 0;"></div>
    <table class="easyui-datagrid" title="DataGrid Row Style" style="width:700px;height:250px"
            data-options="
                singleSelect: true,
                iconCls: ‘icon-save‘,
                url: ‘datagrid_data1.json‘,
                method: ‘get‘,
                rowStyler: function(index,row){
                    if (row.listprice < 30){
                        return ‘background-color:#6293BB;color:#fff;font-weight:bold;‘;
                    }
                }
            ">
        <thead>
            <tr>
                <th data-options="field:‘itemid‘,width:80">Item ID</th>
                <th data-options="field:‘productid‘,width:100">Product</th>
                <th data-options="field:‘listprice‘,width:80,align:‘right‘">List Price</th>
                <th data-options="field:‘unitcost‘,width:80,align:‘right‘">Unit Cost</th>
                <th data-options="field:‘attr1‘,width:250">Attribute</th>
                <th data-options="field:‘status‘,width:60,align:‘center‘">Status</th>
            </tr>
        </thead>
    </table>

</body>
</html>
rowstyle.html

12. 行的边框

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Row Border in DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Row Border in DataGrid</h2>
    <p>This sample shows how to change the row border style of datagrid.</p>
    <div style="margin:20px 0;">
        <span>Border:</span>
        <select onchange="changeBorder(this.value)">
            <option value="lines-both">Both</option>
            <option value="lines-no">No Border</option>
            <option value="lines-right">Right Border</option>
            <option value="lines-bottom">Bottom Border</option>
        </select>
        <span>Striped:</span>
        <input type="checkbox" onclick="$(‘#dg‘).datagrid({striped:$(this).is(‘:checked‘)})">
    </div>
    <table id="dg" class="easyui-datagrid" title="Row Border in DataGrid" style="width:700px;height:250px"
            data-options="singleSelect:true,fitColumns:true,url:‘datagrid_data1.json‘,method:‘get‘">
        <thead>
            <tr>
                <th data-options="field:‘itemid‘,width:80">Item ID</th>
                <th data-options="field:‘productid‘,width:100">Product</th>
                <th data-options="field:‘listprice‘,width:80,align:‘right‘">List Price</th>
                <th data-options="field:‘unitcost‘,width:80,align:‘right‘">Unit Cost</th>
                <th data-options="field:‘attr1‘,width:250">Attribute</th>
                <th data-options="field:‘status‘,width:60,align:‘center‘">Status</th>
            </tr>
        </thead>
    </table>
    <script type="text/javascript">
        function changeBorder(cls){
            $(‘#dg‘).datagrid(‘getPanel‘).removeClass(‘lines-both lines-no lines-right lines-bottom‘).addClass(cls);
        }
    </script>
    <style type="text/css">
        .lines-both .datagrid-body td{
        }
        .lines-no .datagrid-body td{
            border-right:1px dotted transparent;
            border-bottom:1px dotted transparent;
        }
        .lines-right .datagrid-body td{
            border-bottom:1px dotted transparent;
        }
        .lines-bottom .datagrid-body td{
            border-right:1px dotted transparent;
        }
    </style>
    
</body>
</html>
rowborder.html

13. 可编辑行

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Row Editing in DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Row Editing in DataGrid</h2>
    <p>Click the row to start editing.</p>
    <div style="margin:20px 0;"></div>
    
    <table id="dg" class="easyui-datagrid" title="Row Editing in DataGrid" style="width:700px;height:auto"
            data-options="
                iconCls: ‘icon-edit‘,
                singleSelect: true,
                toolbar: ‘#tb‘,
                url: ‘datagrid_data1.json‘,
                method: ‘get‘,
                onClickRow: onClickRow
            ">
        <thead>
            <tr>
                <th data-options="field:‘itemid‘,width:80">Item ID</th>
                <th data-options="field:‘productid‘,width:100,
                        formatter:function(value,row){
                            return row.productname;
                        },
                        editor:{
                            type:‘combobox‘,
                            options:{
                                valueField:‘productid‘,
                                textField:‘productname‘,
                                method:‘get‘,
                                url:‘products.json‘,
                                required:true
                            }
                        }">Product</th>
                <th data-options="field:‘listprice‘,width:80,align:‘right‘,editor:{type:‘numberbox‘,options:{precision:1}}">List Price</th>
                <th data-options="field:‘unitcost‘,width:80,align:‘right‘,editor:‘numberbox‘">Unit Cost</th>
                <th data-options="field:‘attr1‘,width:250,editor:‘textbox‘">Attribute</th>
                <th data-options="field:‘status‘,width:60,align:‘center‘,editor:{type:‘checkbox‘,options:{on:‘P‘,off:‘‘}}">Status</th>
            </tr>
        </thead>
    </table>

    <div id="tb" style="height:auto">
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:‘icon-add‘,plain:true" onclick="append()">Append</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:‘icon-remove‘,plain:true" onclick="removeit()">Remove</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:‘icon-save‘,plain:true" onclick="accept()">Accept</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:‘icon-undo‘,plain:true" onclick="reject()">Reject</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:‘icon-search‘,plain:true" onclick="getChanges()">GetChanges</a>
    </div>
    
    <script type="text/javascript">
        var editIndex = undefined;
        function endEditing(){
            if (editIndex == undefined){return true}
            if ($(‘#dg‘).datagrid(‘validateRow‘, editIndex)){
                var ed = $(‘#dg‘).datagrid(‘getEditor‘, {index:editIndex,field:‘productid‘});
                var productname = $(ed.target).combobox(‘getText‘);
                $(‘#dg‘).datagrid(‘getRows‘)[editIndex][‘productname‘] = productname;
                $(‘#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‘,{status:‘P‘});
                editIndex = $(‘#dg‘).datagrid(‘getRows‘).length-1;
                $(‘#dg‘).datagrid(‘selectRow‘, editIndex)
                        .datagrid(‘beginEdit‘, editIndex);
            }
        }
        function removeit(){
            if (editIndex == undefined){return}
            $(‘#dg‘).datagrid(‘cancelEdit‘, editIndex)
                    .datagrid(‘deleteRow‘, editIndex);
            editIndex = undefined;
        }
        function accept(){
            if (endEditing()){
                $(‘#dg‘).datagrid(‘acceptChanges‘);
            }
        }
        function reject(){
            $(‘#dg‘).datagrid(‘rejectChanges‘);
            editIndex = undefined;
        }
        function getChanges(){
            var rows = $(‘#dg‘).datagrid(‘getChanges‘);
            alert(rows.length+‘ rows are changed!‘);
        }
    </script>
</body>
</html>
rowediting.html

14. 冻结行

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Frozen Rows in DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Frozen Rows in DataGrid</h2>
    <p>This sample shows how to freeze some rows that will always be displayed at the top when the datagrid is scrolled down.</p>
    <div style="margin:20px 0;"></div>
    <table class="easyui-datagrid" title="Frozen Rows in DataGrid" style="width:700px;height:250px"
            data-options="
                singleSelect: true,
                collapsible: true,
                rownumbers: true,
                url: ‘datagrid_data1.json‘,
                method: ‘get‘,
                onLoadSuccess: function(){
                    $(this).datagrid(‘freezeRow‘,0).datagrid(‘freezeRow‘,1);
                }
            ">
        <thead data-options="frozen:true">
            <tr>
                <th data-options="field:‘itemid‘,width:100">Item ID</th>
                <th data-options="field:‘productid‘,width:120">Product</th>
            </tr>
        </thead>
        <thead>
            <tr>
                <th data-options="field:‘listprice‘,width:90,align:‘right‘">List Price</th>
                <th data-options="field:‘unitcost‘,width:90,align:‘right‘">Unit Cost</th>
                <th data-options="field:‘attr1‘,width:230">Attribute</th>
                <th data-options="field:‘status‘,width:60,align:‘center‘">Status</th>
            </tr>
        </thead>
    </table>

</body>
</html>
frozenrows.html

15. 单元格样式

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DataGrid Cell Style - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>DataGrid Cell Style</h2>
    <p>The cells which listprice value is less than 30 are highlighted.</p>
    <div style="margin:20px 0;"></div>
    <table class="easyui-datagrid" title="DataGrid Cell Style" style="width:700px;height:250px"
            data-options="
                singleSelect: true,
                iconCls: ‘icon-save‘,
                url: ‘datagrid_data1.json‘,
                method: ‘get‘
            ">
        <thead>
            <tr>
                <th data-options="field:‘itemid‘,width:80">Item ID</th>
                <th data-options="field:‘productid‘,width:100">Product</th>
                <th data-options="field:‘listprice‘,width:80,align:‘right‘,styler:cellStyler">List Price</th>
                <th data-options="field:‘unitcost‘,width:80,align:‘right‘">Unit Cost</th>
                <th data-options="field:‘attr1‘,width:250">Attribute</th>
                <th data-options="field:‘status‘,width:60,align:‘center‘">Status</th>
            </tr>
        </thead>
    </table>
    <script type="text/javascript">
        function cellStyler(value,row,index){
            if (value < 30){
                return ‘background-color:#ffee00;color:red;‘;
            }
        }
    </script>
</body>
</html>
cellstyle.html

16. 列的位置

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Aligning Columns in DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Aligning Columns in DataGrid</h2>
    <p>Use align and halign properties to set the alignment of the columns and their header.</p>
    <div style="margin:20px 0;"></div>
    
    <table class="easyui-datagrid" title="Aligning Columns in DataGrid" style="width:700px;height:250px"
            data-options="singleSelect:true,collapsible:true,url:‘datagrid_data1.json‘,method:‘get‘">
        <thead>
            <tr>
                <th data-options="field:‘itemid‘,width:80,halign:‘center‘">Item ID</th>
                <th data-options="field:‘productid‘,width:100,halign:‘center‘">Product</th>
                <th data-options="field:‘listprice‘,width:80,align:‘right‘,halign:‘center‘">List Price</th>
                <th data-options="field:‘unitcost‘,width:80,align:‘right‘,halign:‘center‘">Unit Cost</th>
                <th data-options="field:‘attr1‘,width:250,halign:‘center‘">Attribute</th>
                <th data-options="field:‘status‘,width:60,align:‘center‘,halign:‘center‘">Status</th>
            </tr>
        </thead>
    </table>

</body>
</html>
aligncolumns.html

17. 按百分比设置列宽

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Fluid DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Fluid DataGrid</h2>
    <p>This example shows how to assign percentage width to a column in DataGrid.</p>
    <div style="margin:20px 0;"></div>
    
    <table id="dg" class="easyui-datagrid" title="Fluid DataGrid" style="width:700px;height:250px"
            data-options="singleSelect:true,collapsible:true,url:‘datagrid_data1.json‘,method:‘get‘">
        <thead>
            <tr>
                <th data-options="field:‘itemid‘,resizable:false" width="15%">Item ID(15%)</th>
                <th data-options="field:‘productid‘,resizable:false" width="15%">Product(15%)</th>
                <th data-options="field:‘listprice‘,align:‘right‘,resizable:false" width="15%">List Price(15%)</th>
                <th data-options="field:‘unitcost‘,align:‘right‘,resizable:false" width="15%">Unit Cost(15%)</th>
                <th data-options="field:‘attr1‘,resizable:false" width="25%">Attribute(25%)</th>
                <th data-options="field:‘status‘,align:‘center‘,resizable:false" width="15%">Status(15%)</th>
            </tr>
        </thead>
    </table>

</body>
</html>
fluid.html

18. 根据多列排序

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Multiple Sorting - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Multiple Sorting</h2>
    <p>Set ‘multiSort‘ property to true to enable multiple column sorting.</p>
    <div style="margin:20px 0;"></div>
    
    <table class="easyui-datagrid" title="Multiple Sorting" style="width:700px;height:250px"
            data-options="singleSelect:true,collapsible:true,
                url:‘datagrid_data1.json‘,
                method:‘get‘,
                remoteSort:false,
                multiSort:true
            ">
        <thead>
            <tr>
                <th data-options="field:‘itemid‘,width:80,sortable:true">Item ID</th>
                <th data-options="field:‘productid‘,width:100,sortable:true">Product</th>
                <th data-options="field:‘listprice‘,width:80,align:‘right‘,sortable:true">List Price</th>
                <th data-options="field:‘unitcost‘,width:80,align:‘right‘,sortable:true">Unit Cost</th>
                <th data-options="field:‘attr1‘,width:250">Attribute</th>
                <th data-options="field:‘status‘,width:60,align:‘center‘">Status</th>
            </tr>
        </thead>
    </table>

</body>
</html>
multisorting.html

19. 列分组

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Column Group - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Column Group</h2>
    <p>The header cells can be merged. Useful to group columns under a category.</p>
    <div style="margin:20px 0;"></div>
    <table class="easyui-datagrid" title="Column Group" style="width:700px;height:250px"
            data-options="rownumbers:true,singleSelect:true,url:‘datagrid_data1.json‘,method:‘get‘">
        <thead>
            <tr>
                <th data-options="field:‘itemid‘,width:80" rowspan="2">Item ID</th>
                <th data-options="field:‘productid‘,width:100" rowspan="2">Product</th>
                <th colspan="4">Item Details</th>
            </tr>
            <tr>
                <th data-options="field:‘listprice‘,width:80,align:‘right‘">List Price</th>
                <th data-options="field:‘unitcost‘,width:80,align:‘right‘">Unit Cost</th>
                <th data-options="field:‘attr1‘,width:240">Attribute</th>
                <th data-options="field:‘status‘,width:60,align:‘center‘">Status</th>
            </tr>
        </thead>
    </table>

</body>
</html>
columngroup.html

18. 列格式化

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Format DataGrid Columns - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Format DataGrid Columns</h2>
    <p>The list price value will show red color when less than 30.</p>
    <div style="margin:20px 0;"></div>
    <table class="easyui-datagrid" title="Format DataGrid Columns" style="width:700px;height:250px"
            data-options="rownumbers:true,singleSelect:true,iconCls:‘icon-ok‘,url:‘datagrid_data1.json‘,method:‘get‘">
        <thead>
            <tr>
                <th data-options="field:‘itemid‘,width:80">Item ID</th>
                <th data-options="field:‘productid‘,width:100">Product</th>
                <th data-options="field:‘listprice‘,width:80,align:‘right‘,formatter:formatPrice">List Price</th>
                <th data-options="field:‘unitcost‘,width:80,align:‘right‘">Unit Cost</th>
                <th data-options="field:‘attr1‘,width:240">Attribute</th>
                <th data-options="field:‘status‘,width:60,align:‘center‘">Status</th>
            </tr>
        </thead>
    </table>
    <script>
        function formatPrice(val,row){
            if (val < 30){
                return ‘<span style="color:red;">(‘+val+‘)</span>‘;
            } else {
                return val;
            }
        }
    </script>
</body>
</html>
formatcolumns.html

20. 冻结列

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Frozen Columns in DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Frozen Columns in DataGrid</h2>
    <p>You can freeze some columns that can‘t scroll out of view.</p>
    <div style="margin:20px 0;"></div>
    <table class="easyui-datagrid" title="Frozen Columns in DataGrid" style="width:700px;height:250px"
            data-options="rownumbers:true,singleSelect:true,url:‘datagrid_data1.json‘,method:‘get‘">
        <thead data-options="frozen:true">
            <tr>
                <th data-options="field:‘itemid‘,width:100">Item ID</th>
                <th data-options="field:‘productid‘,width:120">Product</th>
            </tr>
        </thead>
        <thead>
            <tr>
                <th data-options="field:‘listprice‘,width:90,align:‘right‘">List Price</th>
                <th data-options="field:‘unitcost‘,width:90,align:‘right‘">Unit Cost</th>
                <th data-options="field:‘attr1‘,width:250">Attribute</th>
                <th data-options="field:‘status‘,width:60,align:‘center‘">Status</th>
            </tr>
        </thead>
    </table>

</body>
</html>
frozencolumns.html

21. 合并单元格

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Merge Cells for DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Merge Cells for DataGrid</h2>
    <p>Cells in DataGrid body can be merged.</p>
    <div style="margin:20px 0;"></div>
    <table class="easyui-datagrid" title="Merge Cells for DataGrid" style="width:700px;height:250px"
            data-options="
                rownumbers: true,
                singleSelect: true,
                iconCls: ‘icon-save‘,
                url: ‘datagrid_data1.json‘,
                method: ‘get‘,
                onLoadSuccess: onLoadSuccess
            ">
        <thead>
            <tr>
                <th data-options="field:‘productid‘,width:100">Product</th>
                <th data-options="field:‘itemid‘,width:80">Item ID</th>
                <th data-options="field:‘listprice‘,width:80,align:‘right‘">List Price</th>
                <th data-options="field:‘unitcost‘,width:80,align:‘right‘">Unit Cost</th>
                <th data-options="field:‘attr1‘,width:240">Attribute</th>
                <th data-options="field:‘status‘,width:60,align:‘center‘">Status</th>
            </tr>
        </thead>
    </table>
    <script type="text/javascript">
        function onLoadSuccess(data){
            var merges = [{
                index: 2,
                rowspan: 2
            },{
                index: 5,
                rowspan: 2
            },{
                index: 7,
                rowspan: 2
            }];
            for(var i=0; i<merges.length; i++){
                $(this).datagrid(‘mergeCells‘,{
                    index: merges[i].index,
                    field: ‘productid‘,
                    rowspan: merges[i].rowspan
                });
            }
        }
    </script>
</body>
</html>
mergecells.html

22. 可编辑单元格

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Cell Editing in DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Cell Editing in DataGrid</h2>
    <p>Click a cell to start editing.</p>
    <div style="margin:20px 0;"></div>
    
    <table id="dg" title="Cell Editing in DataGrid" style="width:700px;height:auto"
            data-options="
                iconCls: ‘icon-edit‘,
                singleSelect: true,
                url: ‘datagrid_data1.json‘,
                method:‘get‘
            ">
        <thead>
            <tr>
                <th data-options="field:‘itemid‘,width:80">Item ID</th>
                <th data-options="field:‘productid‘,width:100,editor:‘text‘">Product</th>
                <th data-options="field:‘listprice‘,width:80,align:‘right‘,editor:{type:‘numberbox‘,options:{precision:1}}">List Price</th>
                <th data-options="field:‘unitcost‘,width:80,align:‘right‘,editor:‘numberbox‘">Unit Cost</th>
                <th data-options="field:‘attr1‘,width:250,editor:‘text‘">Attribute</th>
                <th data-options="field:‘status‘,width:60,align:‘center‘,editor:{type:‘checkbox‘,options:{on:‘P‘,off:‘‘}}">Status</th>
            </tr>
        </thead>
    </table>

    <script type="text/javascript">
        $.extend($.fn.datagrid.methods, {
            editCell: function(jq,param){
                return jq.each(function(){
                    var opts = $(this).datagrid(‘options‘);
                    var fields = $(this).datagrid(‘getColumnFields‘,true).concat($(this).datagrid(‘getColumnFields‘));
                    for(var i=0; i<fields.length; i++){
                        var col = $(this).datagrid(‘getColumnOption‘, fields[i]);
                        col.editor1 = col.editor;
                        if (fields[i] != param.field){
                            col.editor = null;
                        }
                    }
                    $(this).datagrid(‘beginEdit‘, param.index);
                    var ed = $(this).datagrid(‘getEditor‘, param);
                    if (ed){
                        if ($(ed.target).hasClass(‘textbox-f‘)){
                            $(ed.target).textbox(‘textbox‘).focus();
                        } else {
                            $(ed.target).focus();
                        }
                    }
                    for(var i=0; i<fields.length; i++){
                        var col = $(this).datagrid(‘getColumnOption‘, fields[i]);
                        col.editor = col.editor1;
                    }
                });
            },
            enableCellEditing: function(jq){
                return jq.each(function(){
                    var dg = $(this);
                    var opts = dg.datagrid(‘options‘);
                    opts.oldOnClickCell = opts.onClickCell;
                    opts.onClickCell = function(index, field){
                        if (opts.editIndex != undefined){
                            if (dg.datagrid(‘validateRow‘, opts.editIndex)){
                                dg.datagrid(‘endEdit‘, opts.editIndex);
                                opts.editIndex = undefined;
                            } else {
                                return;
                            }
                        }
                        dg.datagrid(‘selectRow‘, index).datagrid(‘editCell‘, {
                            index: index,
                            field: field
                        });
                        opts.editIndex = index;
                        opts.oldOnClickCell.call(this, index, field);
                    }
                });
            }
        });

        $(function(){
            $(‘#dg‘).datagrid().datagrid(‘enableCellEditing‘);
        })
    </script>
</body>
</html>
cellediting.html

23. 缓存

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Cache Editor for DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Cache Editor for DataGrid</h2>
    <p>This example shows how to cache the editors for datagrid to improve the editing speed.</p>
    <div style="margin:20px 0;"></div>
    
    <table id="dg" class="easyui-datagrid" title="Cache Editor for DataGrid" style="width:700px;height:auto"
            data-options="
                iconCls: ‘icon-edit‘,
                singleSelect: true,
                toolbar: ‘#tb‘,
                url: ‘datagrid_data1.json‘,
                method: ‘get‘,
                onClickRow: onClickRow
            ">
        <thead>
            <tr>
                <th data-options="field:‘itemid‘,width:80">Item ID</th>
                <th data-options="field:‘productid‘,width:100,
                        formatter:function(value,row){
                            return row.productname;
                        },
                        editor:{
                            type:‘combobox‘,
                            options:{
                                valueField:‘productid‘,
                                textField:‘productname‘,
                                method:‘get‘,
                                url:‘products.json‘,
                                required:true
                            }
                        }">Product</th>
                <th data-options="field:‘listprice‘,width:80,align:‘right‘,editor:{type:‘numberbox‘,options:{precision:1}}">List Price</th>
                <th data-options="field:‘unitcost‘,width:80,align:‘right‘,editor:‘numberbox‘">Unit Cost</th>
                <th data-options="field:‘attr1‘,width:250,editor:‘text‘">Attribute</th>
                <th data-options="field:‘status‘,width:60,align:‘center‘,editor:{type:‘checkbox‘,options:{on:‘P‘,off:‘‘}}">Status</th>
            </tr>
        </thead>
    </table>

    <div id="tb" style="height:auto">
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:‘icon-save‘,plain:true" onclick="accept()">Accept</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:‘icon-undo‘,plain:true" onclick="reject()">Reject</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:‘icon-search‘,plain:true" onclick="getChanges()">GetChanges</a>
    </div>
    
    <script type="text/javascript">
        (function($){
            function getCacheContainer(t){
                var view = $(t).closest(‘div.datagrid-view‘);
                var c = view.children(‘div.datagrid-editor-cache‘);
                if (!c.length){
                    c = $(‘<div class="datagrid-editor-cache" style="position:absolute;display:none"></div>‘).appendTo(view);
                }
                return c;
            }
            function getCacheEditor(t, field){
                var c = getCacheContainer(t);
                return c.children(‘div.datagrid-editor-cache-‘ + field);
            }
            function setCacheEditor(t, field, editor){
                var c = getCacheContainer(t);
                c.children(‘div.datagrid-editor-cache-‘ + field).remove();
                var e = $(‘<div class="datagrid-editor-cache-‘ + field + ‘"></div>‘).appendTo(c);
                e.append(editor);
            }
            
            var editors = $.fn.datagrid.defaults.editors;
            for(var editor in editors){
                var opts = editors[editor];
                (function(){
                    var init = opts.init;
                    opts.init = function(container, options){
                        var field = $(container).closest(‘td[field]‘).attr(‘field‘);
                        var ed = getCacheEditor(container, field);
                        if (ed.length){
                            ed.appendTo(container);
                            return ed.find(‘.datagrid-editable-input‘);
                        } else {
                            return init(container, options);
                        }
                    }
                })();
                (function(){
                    var destroy = opts.destroy;
                    opts.destroy = function(target){
                        if ($(target).hasClass(‘datagrid-editable-input‘)){
                            var field = $(target).closest(‘td[field]‘).attr(‘field‘);
                            setCacheEditor(target, field, $(target).parent().children());
                        } else if (destroy){
                            destroy(target);
                        }
                    }
                })();
            }
        })(jQuery);
    </script>
    <script type="text/javascript">
        var editIndex = undefined;
        function endEditing(){
            if (editIndex == undefined){return true}
            if ($(‘#dg‘).datagrid(‘validateRow‘, editIndex)){
                var ed = $(‘#dg‘).datagrid(‘getEditor‘, {index:editIndex,field:‘productid‘});
                var productname = $(ed.target).combobox(‘getText‘);
                $(‘#dg‘).datagrid(‘getRows‘)[editIndex][‘productname‘] = productname;
                $(‘#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 accept(){
            if (endEditing()){
                $(‘#dg‘).datagrid(‘acceptChanges‘);
            }
        }
        function reject(){
            $(‘#dg‘).datagrid(‘rejectChanges‘);
            editIndex = undefined;
        }
        function getChanges(){
            var rows = $(‘#dg‘).datagrid(‘getChanges‘);
            alert(rows.length+‘ rows are changed!‘);
        }
    </script>
</body>
</html>
cacheeditor.html

#数据#

技术分享 
{"total":28,"rows":[
	{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
	{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
	{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
	{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
	{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
	{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
	{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
	{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
	{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
	{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]}
datagrid_data1.json
技术分享 
{"total":28,"rows":[
	{"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
	{"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
	{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":28.50,"attr1":"Venomless","itemid":"EST-11"},
	{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
	{"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
	{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
	{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
	{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":63.50,"attr1":"Adult Female","itemid":"EST-16"},
	{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
	{"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
],"footer":[
	{"unitcost":19.80,"listprice":60.40,"productid":"Average:"},
	{"unitcost":198.00,"listprice":604.00,"productid":"Total:"}
]}
datagrid_data2.json
技术分享 
[
{"productid":"FI-SW-01","productname":"Koi"},
{"productid":"K9-DL-01","productname":"Dalmation"},
{"productid":"RP-SN-01","productname":"Rattlesnake"},
{"productid":"RP-LI-02","productname":"Iguana"},
{"productid":"FL-DSH-01","productname":"Manx"},
{"productid":"FL-DLH-02","productname":"Persian"},
{"productid":"AV-CB-01","productname":"Amazon Parrot"}
]
products.json

 

easyUI datagrid

标签：

原文地址：http://www.cnblogs.com/zno2/p/4519275.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！