jQuery教程之jQuery easyui-职坐标

jQuery教程之jQuery easyui

沉沙 2019-01-29 来源：阅读 638 评论 0

摘要：本篇教程探讨了jQuery教程之jQuery easyui，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

本篇教程探讨了jQuery教程之jQuery easyui，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

jQuery教程之jQuery easyui

这个教程的目的是说明如何使用easyui框架容易的创建网页。首先，你需要包含一些js和css文件：
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
easyui预定义了一些图标css，这些css类可以显示图片背景（16×16）。使用这些类之前，需要包含：
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
·           1基本拖放
这个教程显示如何使HTML元素变得可拖放。这个例子会创建3个DIV元素然后让它们变得可拖放。
首先，创建三个DIV元素：
    <div id="dd1" class="dd-demo"></div>
    <div id="dd2" class="dd-demo"></div>
    <div id="dd3" class="dd-demo"></div>
让第一个DIV元素可拖放，使用默认的拖放样式。
$('#dd1').draggable();
让第二个DIV元素使用proxy来拖放，proxy:'clone'表示proxy使用原始元素的复制。
$('#dd2').draggable({
    proxy:'clone'
});
让第三个DIV元素使用自定义proxy来拖放
$('#dd3').draggable({
    proxy:function(source){
        var p = $('<div class="proxy">proxy</div>');
        p.appendTo('body');
        return p;
    }
});
·           2构建购物车型拖放
使用jQuery easyui，我们在web应用中就有了拖放的能力。这个教程显示了如何构建购物车页，它使用户拖放他们希望购买的产品，更新购物篮的物品和价格。

显示产品页：
<ul class="products">
    <li>
        <a href="#" class="item">
            <img src="shirt1.gif"/>
            <div>
                <p>Balloon</p>
                <p>Price:$25</p>
            </div>
        </a>
    </li>
    <li>
        <a href="#" class="item">
            <img src="shirt2.gif"/>
            <div>
                <p>Feeling</p>
                <p>Price:$25</p>
            </div>
        </a>
    </li>
    
</ul>
ul元素包含一些li元素以显示产品。每一个产品的名称和单价属性在P元素中。
创建购物车：
<div class="cart">
    <h1>Shopping Cart</h1>
    <table id="cartcontent" style="width:300px;height:auto;">
        <thead>
            <tr>
                <th field="name" width=140>Name</th>
                <th field="quantity" width=60 align="right">Quantity</th>
                <th field="price" width=60 align="right">Price</th>
            </tr>
        </thead>
    </table>
    <p class="total">Total: $0</p>
    <h2>Drop here to add to cart</h2>
</div>
使用datagrid显示购物篮项目。
拖曳产品副本
$('.item').draggable({
    revert:true,
    proxy:'clone',
    onStartDrag:function(){
        $(this).draggable('options').cursor = 'not-allowed';
        $(this).draggable('proxy').css('z-index',10);
    },
    onStopDrag:function(){
        $(this).draggable('options').cursor='move';
    }
});
我们设置draggable属性proxy为clone，所以拖曳元素使用clone效果。
将选择的产品放入购物车
$('.cart').droppable({
    onDragEnter:function(e,source){
        $(source).draggable('options').cursor='auto';
    },
    onDragLeave:function(e,source){
        $(source).draggable('options').cursor='not-allowed';
    },
    onDrop:function(e,source){
        var name = $(source).find('p:eq(0)').html();
        var price = $(source).find('p:eq(1)').html();
        addProduct(name, parseFloat(price.split('$')[1]));
    }
});
var data = {"total":0,"rows":[]};
var totalCost = 0;
function addProduct(name,price){
    function add(){
        for(var i=0; i<data.total; i++){
            var row = data.rows[i];
            if (row.name == name){
                row.quantity += 1;
                return;
            }
        }
        data.total += 1;
        data.rows.push({
            name:name,
            quantity:1,
            price:price
        });
    }
    add();
    totalCost += price;
    $('#cartcontent').datagrid('loadData', data);
    $('div.cart .total').html('Total: $'+totalCost);
}
当放下产品时，我们得到产品的名称和单价，然后调用addProduct函数更新购物篮。
·           3创建课程表
本教程显示了如何使用jQuery easyui创建课程表。我们创建两个表：在左面的课程列表和右面的时间表。你可以拖课程到时间表的单元格中。课程是<div class='item'>元素，时间格是<td class='drop'>元素。

显示课程
<div class="left">
    <table>
        <tr>
            <td><div class="item">English</div></td>
        </tr>
        <tr>
            <td><div class="item">Science</div></td>
        </tr>
        
    </table>
</div>
显示时间表
<div class="right">
    <table>
        <tr>
            <td class="blank"></td>
            <td class="title">Monday</td>
            <td class="title">Tuesday</td>
            <td class="title">Wednesday</td>
            <td class="title">Thursday</td>
            <td class="title">Friday</td>
        </tr>
        <tr>
            <td class="time">08:00</td>
            <td class="drop"></td>
            <td class="drop"></td>
            <td class="drop"></td>
            <td class="drop"></td>
            <td class="drop"></td>
        </tr>
        
    </table>
</div>
拖动左面的课程
$('.left .item').draggable({
    revert:true,
    proxy:'clone'
});
放置课程到时间表中
$('.right td.drop').droppable({
    onDragEnter:function(){
        $(this).addClass('over');
    },
    onDragLeave:function(){
        $(this).removeClass('over');
    },
    onDrop:function(e,source){
        $(this).removeClass('over');
        if ($(source).hasClass('assigned')){
            $(this).append(source);
        } else {
            var c = $(source).clone().addClass('assigned');
            $(this).empty().append(c);
            c.draggable({
                revert:true
            });
        }
    }
});
当用户拖动左面的课程到右面的时间表中，onDrop函数被调用。源元素的副本被从左面拖动并且附加到到时间表的单元格中。当放置课程到时间表的单元格到另一个单元格时，简单的移动它。

·           4菜单和按钮Menu and Button
    4.1建立简单菜单
    4.2建立链接按钮
    4.3建立菜单按钮
    4.4建立分割按钮
o      4.1创建简单菜单
在DIV标记中定义菜单。像这样：
<div id="mm" style="width:120px;">
    <div onclick="javascript:alert('new')">New</div>
    <div>
        <span>Open</span>
        <div style="width:150px;">
            <div><b>Word</b></div>
            <div>Excel</div>
            <div>PowerPoint</div>
        </div>
    </div>
    <div icon="icon-save">Save</div>
    <div class="menu-sep"></div>
    <div>Exit</div>
</div>
建立菜单，你需要运行下列jQuery代码
$('#mm').menu();
//或者 $('#mm').menu(options);
当菜单被创建时是不可见的，可使用show方法显示或者hide方法隐藏：
$('#mm').menu('show', {
  left: 200,
  top: 100
});
现在，我们创建菜单并在（200,100）处显示。运行代码会得到：

o      4.2创建连接按钮
通常使用<button>元素创建按钮。链接按钮使用A元素创建，事实上，链接按钮是A元素但显示为按钮样式。
创建链接按钮，首先创建A元素：
<h3>DEMO1</h3>
<div style="padding:5px;background:#efefef;width:500px;">
    <a href="#" class="easyui-linkbutton" icon="icon-cancel">Cancel</a>
    <a href="#" class="easyui-linkbutton" icon="icon-reload">Refresh</a>
    <a href="#" class="easyui-linkbutton" icon="icon-search">Query</a>
    <a href="#" class="easyui-linkbutton">text button</a>
    <a href="#" class="easyui-linkbutton" icon="icon-print">Print</a>
</div>

<h3>DEMO2</h3>
<div style="padding:5px;background:#efefef;width:500px;">
    <a href="#" class="easyui-linkbutton" plain="true" icon="icon-cancel">Cancel</a>
    <a href="#" class="easyui-linkbutton" plain="true" icon="icon-reload">Refresh</a>
    <a href="#" class="easyui-linkbutton" plain="true" icon="icon-search">Query</a>
    <a href="#" class="easyui-linkbutton" plain="true">text button</a>
    <a href="#" class="easyui-linkbutton" plain="true" icon="icon-print">Print</a>
    <a href="#" class="easyui-linkbutton" plain="true" icon="icon-help"> </a>
    <a href="#" class="easyui-linkbutton" plain="true" icon="icon-save"></a>
    <a href="#" class="easyui-linkbutton" plain="true" icon="icon-back"></a>
</div>
icon属性是icon CSS类是在按钮上显示的图标。运行代码，出现：

一些时候，你可以决定禁用或者不禁用连接按钮，使用下面的代码可以禁用连接图标：
$(selector).linkbutton({disabled:true});

o      4.3建立菜单按钮
菜单按钮包含按钮和菜单两部分，当点击或者移动鼠标到按钮上的时候，显示相应的菜单。定义菜单按钮，需要定义链接按钮和菜单，像这样：
    <div style="background:#C9EDCC;padding:5px;width:200px;">
        <a href="javascript:void(0)" id="mb1" icon="icon-edit">Edit</a>
        <a href="javascript:void(0)" id="mb2" icon="icon-help">Help</a>
    </div>
    <div id="mm1" style="width:150px;">
        <div icon="icon-undo">Undo</div>
        <div icon="icon-redo">Redo</div>
        <div class="menu-sep"></div>
        <div>Cut</div>
        <div>Copy</div>
        <div>Paste</div>
        <div class="menu-sep"></div>
        <div icon="icon-remove">Delete</div>
        <div>Select All</div>
    </div>
    <div id="mm2" style="width:100px;">
        <div>Help</div>
        <div>Update</div>
        <div>About</div>
    </div>
使用下列jQuery代码：
$('#mb1').menubutton({menu:'#mm1'});
$('#mb2').menubutton({menu:'#mm2'});
现在，菜单按钮就完成了。

o      4.4建立拆分按钮
拆分按钮包括链接按钮和菜单。当用户点击或者悬停在下箭头区域时显示相关菜单。这个例子是建立拆分按钮的演示：
首先，创建一个链接按钮和菜单标记：
<div style="border:1px solid #ccc;background:#ddd;padding:5px;width:120px;">
    <a href="javascript:void(0)" id="sb" icon="icon-edit">Edit</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" plain="true" icon="icon-help"></a>
</div>
<div id="mm" style="width:150px;">
    <div icon="icon-undo">Undo</div>
    <div icon="icon-redo">Redo</div>
    <div class="menu-sep"></div>
    <div>Cut</div>
    <div>Copy</div>
    <div>Paste</div>
    <div class="menu-sep"></div>
    <div>
        <span>Open</span>
        <div style="width:150px;">
            <div>Firefox</div>
            <div>Internet Explorer</div>
            <div class="menu-sep"></div>
            <div>Select Program...</div>
        </div>
    </div>
    <div icon="icon-remove">Delete</div>
    <div>Select All</div>
</div>
jQuery 代码：
$('#sb').splitbutton({menu:'#mm'});
运行后会出现：

    版面
    创建边框版面
    面板上的复合版面
    建立可折叠版面
    建立TABS
    动态添加TABS
    建立XP样式左面板
·           5创建边框版面网页
边框版面提供5个区域：东西南北中（其实就是上下左右中），下面是通常用法：
    5.1北区可以用于网站banner
    5.2南区可以用于版权信息和注释
    5.3西区可以用于导航菜单
    5.4东区可以用于推广项目
    5.5中区可以用于主内容
运用版面，需要确认版面容器然后定义一些区域。版面至少要有一个中间区域。下列是版面例子：
<div class="easyui-layout" style="width:400px;height:300px;">
    <div region="west" split="true" title="Navigator" style="width:150px;">
        <p style="padding:5px;margin:0;">Select language:</p>
        <ul>
            <li><a href="javascript:void(0)" onclick="showpage('java.html')">Java</a></li>
            <li><a href="javascript:void(0)" onclick="showpage('cshape.html')">C#</a></li>
            <li><a href="javascript:void(0)" onclick="showpage('vb.html')">VB</a></li>
            <li><a href="javascript:void(0)" onclick="showpage('erlang.html')">Erlang</a></li>
        </ul>
    </div>
    <div id="content" region="center" title="Language" href="java.html" style="padding:5px;">
    </div>
</div>
我们使用DIV容器创建边框版面。版面拆分容器为2部分，左面是导航菜单右面是主内容。中间区域的面板，我们设置href属性以调用出示网页。
运行layout.html的结果是：
写下onclick事件控制函数以获取数据，showpage函数非常简单：
function showpage(url){
    $('#content').load(url);
}
o      5.1面板上的复合版面
面板允许你建立为多用户定制版面。这个例子我们建立MSN信息框，通过面板版面插件：

我们使用多种版面在面板区域中。最上面的信息框我们放置搜索input，也可以放置头像在右面。中间区域我们差分成两部分通过split属性为TRUE，允许用户改变面板上区域的大小：
代码：
<div class="easyui-panel" title="Complex Panel Layout" icon="icon-search" collapsible="true" style="padding:5px;width:500px;height:250px;">
    <div class="easyui-layout" fit="true">
        <div region="north" border="false" class="p-search">
            <label>Search:</label><input></input>
        </div>
        <div region="center" border="false">
            <div class="easyui-layout" fit="true">
                <div region="east" border="false" class="p-right">
                    <img src="msn.gif"/>
                </div>
                <div region="center" border="false" style="border:1px solid #ccc;">
                    <div class="easyui-layout" fit="true">
                        <div region="south" split="true" border="false" style="height:60px;">
                            <textarea style="overflow:auto;border:0;width:100%;height:100%;">Hi,I am easyui.</textarea>
                        </div>
                        <div region="center" border="false">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
我们不需要编写任何js代码，但是拥有强大的用户接口设计的能力。
o      5.2建立可折叠版面
这个教程中，我们学习关于easyui可折叠性。可折叠包括一系列面板。所有面板头是全部可见的，但是在一个时期内只有一个面板的body内容是可见的。当用户点击面板头，body内容变为可见其他面板body内容变得不可见。
<div class="easyui-accordion" style="width:300px;height:200px;">
    <div title="About Accordion" icon="icon-ok" style="overflow:auto;padding:10px;">
        <h3 style="color:#0099FF;">Accordion for jQuery</h3>
        <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
    </div>
    <div title="About easyui" icon="icon-reload" selected="true" style="padding:10px;">
        easyui help you build your web page easily
    </div>
    <div title="Tree Menu">
        <ul id="tt1" class="easyui-tree">
            <li>
                <span>Folder1</span>
                <ul>
                    <li>
                        <span>Sub Folder 1</span>
                        <ul>
                            <li>
                                <span>File 11</span>
                            </li>
                            <li>
                                <span>File 12</span>
                            </li>
                            <li>
                                <span>File 13</span>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <span>File 2</span>
                    </li>
                    <li>
                        <span>File 3</span>
                    </li>
                </ul>
            </li>
            <li>
                <span>File2</span>
            </li>
        </ul>
    </div>
</div>
我们建立3个面板，第三个面板内容是一个树状菜单。


o      5.3建立TABS
这个教程显示你如何使用easyui建立tabs组件。tabs有多个面板，这些面板能被动态的添加或者删除。你可以使用tabs来显示不同的实体。在一个时间内只显示一个面板。每一个面板拥有title，icon和close按钮。当tabs被选择时，相关面板的内容被现实。

tabs从HTML标记创建，包含DIV容器和一些DIV面板。
<div class="easyui-tabs" style="width:400px;height:100px;">
    <div title="First Tab" style="padding:10px;">
        First Tab
    </div>
    <div title="Second Tab" closable="true" style="padding:10px;">
        Second Tab
    </div>
    <div title="Third Tab" icon="icon-reload" closable="true" style="padding:10px;">
        Third Tab
    </div>
</div>
我们创建3个面板的tabs组件，第二个和第三个面板可以通过点击close按钮关闭。
o      5.4动态添加tabs
你只需调用add方法，就可以使用jquery easyui很容易动态添加tabs。在这个教程中，我们动态的添加显示一个页面使用iframe。当点击添加add按钮，新tab被添加。如果tab已经存在，被激活。

第一步：建立tabs
<div style="margin-bottom:10px">
    <a href="#" class="easyui-linkbutton" onclick="addTab('google','//www.google.com')">google</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('jquery','//jquery.com/')">jquery</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('easyui','//jquery-easyui.wikidot.com')">easyui</a>
</div>
<div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
    <div title="Home">
    </div>
</div>
HTML代码很简单，我们创建tabs用一个tab面板，名字为home。记住，我们不需要写任何js代码。
第二步：使addTab函数生效
function addTab(title, url){
    if ($('#tt').tabs('exists', title)){
        $('#tt').tabs('select', title);
    } else {
        var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
        $('#tt').tabs('add',{
            title:title,
            content:content,
            closable:true
        });
    }
}
我们使用exists方法判断tab是否存在。如果存在，则激活tab。调用add方法添加新tab面板。
o      5.5创建XP式样左面板
通常，浏览文件夹在windowsXP中有左面板，包括常用任务内容。这个教程显示你如何使用easyui面板插件建立XP左面板。
定义几个面板
我们几个面板显示一些任务，每个面板仅可以折叠和展开工具按钮。代码像这样：
<div style="width:200px;height:auto;background:#7190E0;padding:5px;">
    <div class="easyui-panel" title="Picture Tasks" collapsible="true" style="width:200px;height:auto;padding:10px;">
        View as a slide show<br/>
        Order prints online<br/>
        Print pictures
    </div>
    <br/>
    <div class="easyui-panel" title="File and Folder Tasks" collapsible="true" style="width:200px;height:auto;padding:10px;">
        Make a new folder<br/>
        Publish this folder to the Web<br/>
        Share this folder
    </div>
    <br/>
    <div class="easyui-panel" title="Other Places" collapsible="true" collapsed="true" style="width:200px;height:auto;padding:10px;">
        New York<br/>
        My Pictures<br/>
        My Computer<br/>
        My Network Places
    </div>
    <br/>
    <div class="easyui-panel" title="Details" collapsible="true" style="width:200px;height:auto;padding:10px;">
        My documents<br/>
        File folder<br/><br/>
        Date modified: Oct.3rd 2010
    </div>
</div>

视图效果是不是我们想要的，我们必须改变面板header背景图片和收缩按钮icon。
定制面板外观效果
做到这一点并不难，我们需要做的是重新定义一些CSS。
.panel-header{
    background:#fff url('panel_header_bg.gif') no-repeat top right;
}
.panel-body{
    background:#f0f0f0;
}
.panel-tool-collapse{
    background:url('arrow_up.gif') no-repeat 0px -3px;
}
.panel-tool-expand{
    background:url('arrow_down.gif') no-repeat 0px -3px;
}

当使用easyui定义用户接口时是很简单的。
·           6 DataGrid 数据格
    6.1转换HTML表格到DataGrid
    6.2给DataGrid添加分页
    6.3从DataGrid中获得选定行的数据
    6.4添加工具栏到DataGrid
    6.5DataGrid冻结列
    6.6动态改变DataGrid列
    6.7格式化DataGrid列
    6.8添加DataGrid的分类
    6.9在DataGrid中建立列组
    6.10在DataGrid中选择复选框
    6.11定制DataGrid页面
    6.12使DataGrid能行嫩编辑
    6.13合并DataGrid单元格

o      6.1 转换HTML表格到DataGrid
这个例子显示如何转换表格到DataGrid。DataGrid在thead标记中定义列，在tbody标记中定义数据。确定给每一个数据列设置字段名，看这个例子：
<table id="tt" class="easyui-datagrid" style="width:400px;height:auto;">
    <thead>
        <tr>
            <th field="name1" width="50">Col 1</th>
            <th field="name2" width="50">Col 2</th>
            <th field="name3" width="50">Col 3</th>
            <th field="name4" width="50">Col 4</th>
            <th field="name5" width="50">Col 5</th>
            <th field="name6" width="50">Col 6</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
        </tr>
    </tbody>
</table>
不需要js代码就能看到这个效果：

当然，你也可以定义复合表头，像这样：
<thead>
    <tr>
        <th field="name1" width="50" rowspan="2">Col 1</th>
        <th field="name2" width="50" rowspan="2">Col 2</th>
        <th field="name3" width="50" rowspan="2">Col 3</th>
        <th colspan="3">Details</th>
    </tr>
    <tr>
        <th field="name4" width="50">Col 4</th>
        <th field="name5" width="50">Col 5</th>
        <th field="name6" width="50">Col 6</th>
    </tr>
</thead>

o      6.2 给DataGrid添加分页
这个例子显示如何能从服务器中调用数据，如何添加分页到DataGrid中。

从远程服务器中调用数据，你必须设置url属性，服务器应该返回JSON格式数据。获得更多数据格式，请参考DataGrid文档。
建立<table>标记
首先，我们在网页上定义标记。
<table id="tt"></table>
jQuery代码
然后，写一些jQuery代码建立DataGrid组件
$('#tt').datagrid({
    title:'Load Data',
    iconCls:'icon-save',
    width:600,
    height:250,
    url:'/demo3/data/getItems',
    columns:[[
        {field:'itemid',title:'Item ID',width:80},
        {field:'productid',title:'Product ID',width:80},
        {field:'listprice',title:'List Price',width:80,align:'right'},
        {field:'unitcost',title:'Unit Cost',width:80,align:'right'},
        {field:'attr1',title:'Attribute',width:100},
        {field:'status',title:'Status',width:60}
    ]],
    pagination:true
});
我们定义DataGrid列并且设置pagination属性为true，这样可以在DataGrid上产生分页栏按钮。分页发送2个参数到服务器。
    page: 页号，从1开始。
    rows: 每页的列数。
我们使用etmvc framework编写后台服务代码，所以，url被映射到DataController类和getItems方法。
定义数据模型的例子
@Table(name="item")
public class Item extends ActiveRecordBase{
    @Id public String itemid;
    @Column public String productid;
    @Column public java.math.BigDecimal listprice;
    @Column public java.math.BigDecimal unitcost;
    @Column public String attr1;
    @Column public String status;
}
编写控制代码
public class DataController extends ApplicationController{
    /**
     * get item data
     * @param page page index
     * @param rows rows per page
     * @return JSON format string
     * @throws Exception
     */
    public View getItems(int page, int rows) throws Exception{
        long total = Item.count(Item.class, null, null);
        List<Item> items = Item.findAll(Item.class, null, null, null, rows, (page-1)*rows);
        Map<String, Object> result = new HashMap<String, Object>();
        result.put("total", total);
        result.put("rows", items);
        return new JsonView(result);
    }
}
数据库配置实例
domain_base_class=com.et.ar.ActiveRecordBase

com.et.ar.ActiveRecordBase.adapter_class=com.et.ar.adapters.MySqlAdapter
com.et.ar.ActiveRecordBase.driver_class=com.mysql.jdbc.Driver
com.et.ar.ActiveRecordBase.url=jdbc:mysql://localhost/jpetstore
com.et.ar.ActiveRecordBase.username=root
com.et.ar.ActiveRecordBase.password=soft123456
com.et.ar.ActiveRecordBase.pool_size=0
部署
    建立MySQL数据库
    从'/db/item.sql'导入测试表数据，表名是'item'.
    按需要改变数据库配置，配置文件在/WEB-INF/classes/activerecord.properties中。
    运行程序
o      6.3 得到DataGrid选择行
这个例子显示了如何得到选择行的数据。

DataGrid组件包括2个方法检索选择行数据：
    getSelected: 得到第一个选择行的数据，如果没有选择行则返回null否则返回该记录
    getSelections:得到全部的选择行的数据，如果元素是记录的话，返回数组数据
创建标记
<table id="tt"></table>
创建 datagrid
$('#tt').datagrid({
    title:'Load Data',
    iconCls:'icon-save',
    width:600,
    height:250,
    url:'datagrid_data.json',
    columns:[[
        {field:'itemid',title:'Item ID',width:80},
        {field:'productid',title:'Product ID',width:80},
        {field:'listprice',title:'List Price',width:80,align:'right'},
        {field:'unitcost',title:'Unit Cost',width:80,align:'right'},
        {field:'attr1',title:'Attribute',width:100},
        {field:'status',title:'Status',width:60}
    ]]
});
用法演示
得到选择行数据：
var row = $('#tt').datagrid('getSelected');
if (row){
    alert('Item ID:'+row.itemid+"\nPrice:"+row.listprice);
}
得到全部选择行的itemid:
var ids = [];
var rows = $('#tt').datagrid('getSelections');
for(var i=0; i<rows.length; i++){
    ids.push(rows[i].itemid);
}
alert(ids.join('\n'));

o      6.4 添加工具栏到DataGrid
这个例子显示了如何添加工具栏：

DataGrid插件有工具栏属性，这个属性可以定义工具栏。工具栏包括定义了下列属性的按钮：
    text: 在按钮上显示的文本
    iconCls: 定义背景图标显示在按钮的左面的CSS类。
    handler: 当用户按下按钮时，处理一些事情的函数
标记
<table id="tt"></table>
jQuery
$('#tt').datagrid({
    title:'DataGrid with Toolbar',
    width:550,
    height:250,
    url:'datagrid_data.json',
    columns:[[
        {field:'itemid',title:'Item ID',width:80},
        {field:'productid',title:'Product ID',width:80},
        {field:'listprice',title:'List Price',width:80,align:'right'},
        {field:'unitcost',title:'Unit Cost',width:80,align:'right'},
        {field:'attr1',title:'Attribute',width:100},
        {field:'status',title:'Status',width:60}
    ]],
    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')
        }
    }]
});

o      6.5 DataGrid冻结列
这个例子演示了如何冻结列。当用户水平滚动的时候，冻结列不能滚动出视图。

冻结列，你应该定义frozenColumns属性，这个属性和columns属性相似。
<table id="tt"></table>
$('#tt').datagrid({
    title:'Frozen Columns',
    iconCls:'icon-save',
    width:500,
    height:250,
    url:'datagrid_data.json',
    frozenColumns:[[
        {field:'itemid',title:'Item ID',width:80},
        {field:'productid',title:'Product ID',width:80},
    ]],
    columns:[[
        {field:'listprice',title:'List Price',width:80,align:'right'},
        {field:'unitcost',title:'Unit Cost',width:80,align:'right'},
        {field:'attr1',title:'Attribute',width:100},
        {field:'status',title:'Status',width:60}
    ]]
});

o      6.6 动态改变DataGrid列
DataGrid列可以使用columns属性定义。如果你想动态改变列，也没问题。改变列你可以重新调用DataGrid方法平且传递新columns属性。
下面定义DataGrid组件
<table id="tt"></table>
$('#tt').datagrid({
    title:'Change Columns',
    iconCls:'icon-save',
    width:550,
    height:250,
    url:'datagrid_data.json',
    columns:[[
        {field:'itemid',title:'Item ID',width:80},
        {field:'productid',title:'Product ID',width:80},
        {field:'attr1',title:'Attribute',width:200},
        {field:'status',title:'Status',width:80}
    ]]
});
运行网页，我们看到：

通常，我们想改变列，你可以写这些代码：
$('#tt').datagrid({
    columns:[[
        {field:'itemid',title:'Item ID',width:80},
        {field:'productid',title:'Product ID',width:80},
        {field:'listprice',title:'List Price',width:80,align:'right'},
        {field:'unitcost',title:'Unit Cost',width:80,align:'right'},
        {field:'attr1',title:'Attribute',width:100},
        {field:'status',title:'Status',width:60}
    ]]
});
记住，我们已经定义其他属性，比如：url，width，height等，我们不需要重复定义他们，我们定义我们想改变的。

o      6.7 格式化DataGrid列
下面的例子是在easyui DataGrid中格式化列，如果单价低于20，则使用定义列formatter为红色文本。

格式化DataGrid列，我们应该设置formatter属性，这个属性是一个函数。格式化函数包括两个参数：
    value: 显示字段当前列的值
    record: 当前行记录数据
Markup
<table id="tt"></table>
jQuery
$('#tt').datagrid({
    title:'Formatting Columns',
    width:550,
    height:250,
    url:'datagrid_data.json',
    columns:[[
        {field:'itemid',title:'Item ID',width:80},
        {field:'productid',title:'Product ID',width:80},
        {field:'listprice',title:'List Price',width:80,align:'right',
            formatter:function(val,rec){
                if (val < 20){
                    return '<span style="color:red;">('+val+')</span>';
                } else {
                    return val;
                }
            }
        },
        {field:'unitcost',title:'Unit Cost',width:80,align:'right'},
        {field:'attr1',title:'Attribute',width:100},
        {field:'status',title:'Status',width:60}
    ]]
});

o      6.8 添加排序到DataGrid
这个事例演示了如何在点击列头的时候排序

DataGrid中全部的列可以通过点击列头被排序。你可以定义可以被排序的列。默认的，列不能被排序除非你设置sortable属性为TRUE，下面是例子：
标记
<table id="tt"></table>
jQuery
$('#tt').datagrid({
    title:'Sortable Column',
    width:550,
    height:250,
    url:'/demo4/data/getItems',
    columns:[[
        {field:'itemid',title:'Item ID',width:80,sortable:true},
        {field:'productid',title:'Product ID',width:80,sortable:true},
        {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
        {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
        {field:'attr1',title:'Attribute',width:100},
        {field:'status',title:'Status',width:60}
    ]],
    pagination:true,
    sortName:'itemid',
    sortOrder:'asc'
});
我们定义一些可排序的列，包括itemid，productid，listprice，unitcost等。attr1列和status列不能被排序。我们设置默认排序列：itemid，按asc（升序）排序。
当排序时， DataGrid发送两个参数到服务器：
    sort: 排序列字段名
    order: 排序次序： 'asc' 或 'desc', 默认为'asc'.
我们使用etmvc framework 写后台服务器代码，首先定义数据模型
@Table(name="item")
public class Item extends ActiveRecordBase{
    @Id public String itemid;
    @Column public String productid;
    @Column public java.math.BigDecimal listprice;
    @Column public java.math.BigDecimal unitcost;
    @Column public String attr1;
    @Column public String status;
}
写控制代码：
public class DataController extends ApplicationController{
    /**
     * get item data
     * @param page page number
     * @param rows page size
     * @param sort sort column field name
     * @param order sort order, can be 'asc' or 'desc'
     * @return JSON format string
     * @throws Exception
     */
    public View getItems(int page, int rows, String sort, String order) throws Exception{
        long total = Item.count(Item.class, null, null);
        List<Item> items = Item.findAll(Item.class, null, null, sort+" "+order, rows, (page-1)*rows);
        Map<String, Object> result = new HashMap<String, Object>();
        result.put("total", total);
        result.put("rows", items);
        return new JsonView(result);
    }
}
我们使用MySQL数据库存储演示数据，下面是配置实例：
domain_base_class=com.et.ar.ActiveRecordBase

com.et.ar.ActiveRecordBase.adapter_class=com.et.ar.adapters.MySqlAdapter
com.et.ar.ActiveRecordBase.driver_class=com.mysql.jdbc.Driver
com.et.ar.ActiveRecordBase.url=jdbc:mysql://localhost/jpetstore
com.et.ar.ActiveRecordBase.username=root
com.et.ar.ActiveRecordBase.password=soft123456
com.et.ar.ActiveRecordBase.pool_size=0
部署
    建立MySQL数据库
    从'/db/item.sql'导入测试表数据，表名是'item'.
    按需要改变数据库配置，配置文件在/WEB-INF/classes/activerecord.properties中。
    运行程序

o      6.9 在DataGrid上的复选框
本教程显示了你如何放置checkbox列。使用checkbox，用户可以选定/取消数据行。

添加checkbox列，我们简单的添加列的checkbox属性，并且设置为true。代码像这样：
<table id="tt"></table>
$('#tt').datagrid({
    title:'Checkbox Select',
    iconCls:'icon-ok',
    width:600,
    height:250,
    url:'datagrid_data.json',
    idField:'itemid',
    columns:[[
        {field:'ck',checkbox:true},
        {field:'itemid',title:'Item ID',width:80},
        {field:'productid',title:'Product ID',width:80},
        {field:'listprice',title:'List Price',width:80,align:'right'},
        {field:'unitcost',title:'Unit Cost',width:80,align:'right'},
        {field:'attr1',title:'Attribute',width:100},
        {field:'status',title:'Status',width:60}
    ]],
    pagination:true
});
上面的代码，我们可以添加列的checkbox属性，然后他就会出现选择列。如果idField属性被设置，DataGrid的选择会被不同的页保持。

o      6.10 自定义DataGrid分页
DataGrid内建分页能力是强大的，它比自定义相对容易。在这个教程，我们将要创建DataGrid并且在页面工具栏中添加一些自定义按钮。

标记
<table id="tt"></table>
创建DataGrid
$('#tt').datagrid({
    title:'Load Data',
    iconCls:'icon-save',
    width:550,
    height:250,
    pagination:true,
    url:'datagrid_data.json',
    columns:[[
        {field:'itemid',title:'Item ID',width:80},
        {field:'productid',title:'Product ID',width:80},
        {field:'listprice',title:'List Price',width:80,align:'right'},
        {field:'unitcost',title:'Unit Cost',width:80,align:'right'},
        {field:'attr1',title:'Attribute',width:100},
        {field:'status',title:'Status',width:60}
    ]]
});
记住设置pagination属性为true产生页面工具栏。
自定义页面工具栏
var pager = $('#tt').datagrid('getPager');    //得到DataGrid页面
pager.pagination({
    showPageList:false,
    buttons:[{
        iconCls:'icon-search',
        handler:function(){
            alert('search');
        }
    },{
        iconCls:'icon-add',
        handler:function(){
            alert('add');
        }
    },{
        iconCls:'icon-edit',
        handler:function(){
            alert('edit');
        }
    }],
    onBeforeRefresh:function(){
        alert('before refresh');
        return true;
    }
});
我们得到DataGrid页，然后重新构建页面。我们隐藏页列表然后添加新按钮。

o      6.11使DataGrid能编辑
可编辑特征是最近添加的。它能让用户添加新行。用户也可以更新一行或多行。这个教程显示了如何创建使用行内编辑的DataGrid。

创建DataGrid
<table id="tt"></table>
$('#tt').datagrid({
    title:'Editable DataGrid',
    iconCls:'icon-edit',
    width:660,
    height:250,
    singleSelect:true,
    idField:'itemid',
    url:'datagrid_data.json',
    columns:[[
        {field:'itemid',title:'Item ID',width:60},
        {field:'productid',title:'Product',width:100,
            formatter:function(value){
                for(var i=0; i<products.length; i++){
                    if (products[i].productid == value)
                    return products[i].name;
                }
                return value;
            },
            editor:{
                type:'combobox',
                options:{
                    valueField:'productid',
                    textField:'name',
                    data:products,
                    required:true
                }
            }
        },
        {field:'listprice',title:'List Pric