思享工具箱

Jquery easyui教程

摘要：
目录1基本拖放42构建购物模型

目  录

  • 1基本拖放................................................................................................................................................... 4
  • 2构建购物车型拖放.................................................................................................................................... 5
  • 3创建课程表............................................................................................................................................... 8
  • 4菜单和按钮Menu and Button............................................................................................................... 10

o     4.1创建简单菜单................................................................................................................................ 10

o     4.2创建连接按钮................................................................................................................................ 11

o     4.3建立菜单按钮................................................................................................................................ 12

o     4.4建立拆分按钮................................................................................................................................ 13

  • 5创建边框版面网页.................................................................................................................................. 15

o     5.1面板上的复合版面........................................................................................................................ 16

o     5.2建立可折叠版面............................................................................................................................ 17

o     5.3建立TABS..................................................................................................................................... 18

o     5.4动态添加tabs............................................................................................................................... 19

o     5.5创建XP式样左面板...................................................................................................................... 20

  • 6 DataGrid 数据格.................................................................................................................................. 23

o     6.1 转换HTML表格到DataGrid....................................................................................................... 23

o     6.2 给DataGrid添加分页.................................................................................................................. 25

o     6.3 得到DataGrid选择行.................................................................................................................. 27

o     6.4 添加工具栏到DataGrid............................................................................................................... 28

o     6.5 DataGrid冻结列........................................................................................................................... 30

o     6.6 动态改变DataGrid列.................................................................................................................. 31

o     6.7 格式化DataGrid列...................................................................................................................... 32

o     6.8 添加排序到DataGrid................................................................................................................... 33

o     6.9 在DataGrid上的复选框.............................................................................................................. 36

o     6.10 自定义DataGrid分页................................................................................................................ 37

o     6.11使DataGrid能编辑..................................................................................................................... 38

o     6.12 DataGrid中合并单元格.............................................................................................................. 41

  • 7 窗口........................................................................................................................................................ 44

o     7.1 我第一个窗口............................................................................................................................... 44

o     7.2 自定义窗口工具........................................................................................................................... 45

o     7.3 Window和Layout....................................................................................................................... 46

o     7.4 创建对话框.................................................................................................................................. 47

  • 8 Tree....................................................................................................................................................... 50
  • 8.1从标记创建tree.......................................................................................................................... 51
  • 8.2创建异步Tree............................................................................................................................. 52
  • 8.3 添加节点..................................................................................................................................... 55
  • 8.4 创建带有checkbox节点的tree................................................................................................ 57
  • 9 表单........................................................................................................................................................ 58

o     9.1 Ajax方式发送表单....................................................................................................................... 58

o     9.2 给表单添加复合tree字段........................................................................................................... 59

o     9.3  验证表单.................................................................................................................................... 62

概述

这个教程的目的是说明如何使用easyui框架容易的创建网页。首先，你需要包含一些js和css文件：

<link rel="stylesheet" type="text/css" href="http://t.zoukankan.com/themes/default/easyui.css">

<script type="text/javascript" src="http://t.zoukankan.com/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="http://t.zoukankan.com/jquery.easyui.min.js"></script>

easyui预定义了一些图标css，这些css类可以显示图片背景（16×16）。使用这些类之前，需要包含：

<link rel="stylesheet" type="text/css" href="http://t.zoukankan.com/themes/icon.css">

·           1基本拖放

这个教程显示如何使HTML元素变得可拖放。这个例子会创建3个DIV元素然后让它们变得可拖放。

首先，创建三个DIV元素：

    <div class="dd-demo"></div>

    <div class="dd-demo"></div>

    <div 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="http://t.zoukankan.com/huangf714-p-5869826.html#" class="item">

            <img src="http://t.zoukankan.com/shirt1.gif"/>

            <div>

                <p>Balloon</p>

                <p>Price:$25</p>

            </div>

        </a>

    </li>

    <li>

        <a href="http://t.zoukankan.com/huangf714-p-5869826.html#" class="item">

            <img src="http://t.zoukankan.com/shirt2.gif"/>

            <div>

                <p>Feeling</p>

                <p>Price:$25</p>

            </div>

        </a>

    </li>

    <!-- other products -->

</ul>

ul元素包含一些li元素以显示产品。每一个产品的名称和单价属性在P元素中。

创建购物车：

<div class="cart">

    <h1>Shopping Cart</h1>

    <table style="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>

        <!-- other subjects -->

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

        <!-- other cells -->

    </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   style="120px;">
    <div onclick="javascript:alert('new')">New</div>
    <div>
        <span>Open</span>
        <div style="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;500px;">

    <a href="http://t.zoukankan.com/huangf714-p-5869826.html#" icon="icon-cancel">Cancel</a>

    <a href="http://t.zoukankan.com/huangf714-p-5869826.html#" icon="icon-reload">Refresh</a>

    <a href="http://t.zoukankan.com/huangf714-p-5869826.html#" icon="icon-search">Query</a>

    <a href="http://t.zoukankan.com/huangf714-p-5869826.html#" class="easyui-linkbutton">text button</a>

    <a href="http://t.zoukankan.com/huangf714-p-5869826.html#" icon="icon-print">Print</a>

</div>

 

<h3>DEMO2</h3>

<div style="padding:5px;background:#efefef;500px;">

    <a href="http://t.zoukankan.com/huangf714-p-5869826.html#" plain="true" icon="icon-cancel">Cancel</a>

    <a href="http://t.zoukankan.com/huangf714-p-5869826.html#" plain="true" icon="icon-reload">Refresh</a>

    <a href="http://t.zoukankan.com/huangf714-p-5869826.html#" plain="true" icon="icon-search">Query</a>

    <a href="http://t.zoukankan.com/huangf714-p-5869826.html#" plain="true">text button</a>

    <a href="http://t.zoukankan.com/huangf714-p-5869826.html#" plain="true" icon="icon-print">Print</a>

    <a href="http://t.zoukankan.com/huangf714-p-5869826.html#" plain="true" icon="icon-help">&nbsp;</a>

    <a href="http://t.zoukankan.com/huangf714-p-5869826.html#" plain="true" icon="icon-save"></a>

    <a href="http://t.zoukankan.com/huangf714-p-5869826.html#" plain="true" icon="icon-back"></a>

</div>

icon属性是icon CSS类是在按钮上显示的图标。运行代码，出现：

 

一些时候，你可以决定禁用或者不禁用连接按钮，使用下面的代码可以禁用连接图标：

$(selector).linkbutton({disabled:true});

 

o      4.3建立菜单按钮

菜单按钮包含按钮和菜单两部分，当点击或者移动鼠标到按钮上的时候，显示相应的菜单。定义菜单按钮，需要定义链接按钮和菜单，像这样：

    <div style="background:#C9EDCC;padding:5px;200px;">

        <a href="javascript:void(0)" icon="icon-edit">Edit</a>

        <a href="javascript:void(0)" icon="icon-help">Help</a>

    </div>

    <div style="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 style="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;120px;">

    <a href="javascript:void(0)" icon="icon-edit">Edit</a>

    <a href="javascript:void(0)" plain="true" icon="icon-help"></a>

</div>

<div style="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="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'});

运行后会出现：

 

  1. 版面
  • 创建边框版面
  • 面板上的复合版面
  • 建立可折叠版面
  • 建立TABS
  • 动态添加TABS
  • 建立XP样式左面板
·           5创建边框版面网页

边框版面提供5个区域：东西南北中（其实就是上下左右中），下面是通常用法：

  • 5.1北区可以用于网站banner
  • 5.2南区可以用于版权信息和注释
  • 5.3西区可以用于导航菜单
  • 5.4东区可以用于推广项目
  • 5.5中区可以用于主内容

运用版面，需要确认版面容器然后定义一些区域。版面至少要有一个中间区域。下列是版面例子：

<div style="400px;height:300px;">

    <div region="west" split="true" title="Navigator" style="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 region="center" title="Language" href="http://t.zoukankan.com/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   title="Complex Panel Layout" icon="icon-search" collapsible="true" style="padding:5px;500px;height:250px;">
    <div   fit="true">
        <div region="north" border="false" class="p-search">
            <label>Search:</label><input></input>
        </div>
        <div region="center" border="false">
            <div   fit="true">
                <div region="east" border="false" class="p-right">
                    <img src="http://t.zoukankan.com/msn.gif"/>
                </div>
                <div region="center" border="false" style="border:1px solid #ccc;">
                    <div   fit="true">
                        <div region="south" split="true" border="false" style="height:60px;">
                            <textarea style="overflow:auto;border:0;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 style="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 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 style="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="http://t.zoukankan.com/huangf714-p-5869826.html#"   onclick="addTab('google','http://www.google.com')">google</a>
    <a href="http://t.zoukankan.com/huangf714-p-5869826.html#"   onclick="addTab('jquery','http://jquery.com/')">jquery</a>
    <a href="http://t.zoukankan.com/huangf714-p-5869826.html#"   onclick="addTab('easyui','http://jquery-easyui.wikidot.com')">easyui</a>
</div>
<div     style="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="http://t.zoukankan.com/huangf714-p-5869826.html'+url+'" style="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="200px;height:auto;background:#7190E0;padding:5px;">

    <div title="Picture Tasks" collapsible="true" style="200px;height:auto;padding:10px;">

        View as a slide show<br/>

        Order prints online<br/>

        Print pictures

    </div>

    <br/>

    <div title="File and Folder Tasks" collapsible="true" style="200px;height:auto;padding:10px;">

        Make a new folder<br/>

        Publish this folder to the Web<br/>

        Share this folder

    </div>

    <br/>

    <div title="Other Places" collapsible="true" collapsed="true" style="200px;height:auto;padding:10px;">

        New York<br/>

        My Pictures<br/>

        My Computer<br/>

        My Network Places

    </div>

    <br/>

    <div title="Details" collapsible="true" style="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 style="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" rowspan="2">Col 1</th>

        <th field="name2" rowspan="2">Col 2</th>

        <th field="name3" 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',

    600,

    height:250,

    url:'/demo3/data/getItems',

    columns:[[

        {field:'itemid',title:'Item ID',80},

        {field:'productid',title:'Product ID',80},

        {field:'listprice',title:'List Price',80,align:'right'},

        {field:'unitcost',title:'Unit Cost',80,align:'right'},

        {field:'attr1',title:'Attribute',100},

        {field:'status',title:'Status',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',

    600,

    height:250,

    url:'datagrid_data.json',

    columns:[[

        {field:'itemid',title:'Item ID',80},

        {field:'productid',title:'Product ID',80},

        {field:'listprice',title:'List Price',80,align:'right'},

        {field:'unitcost',title:'Unit Cost',80,align:'right'},

        {field:'attr1',title:'Attribute',100},

        {field:'status',title:'Status',60}

    ]]

});

用法演示

得到选择行数据：

var row = $('#tt').datagrid('getSelected');

if (row){

    alert('Item ID:'+row.itemid+"Price:"+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(' '));

 

o      6.4 添加工具栏到DataGrid

这个例子显示了如何添加工具栏：

 

DataGrid插件有工具栏属性，这个属性可以定义工具栏。工具栏包括定义了下列属性的按钮：

  • text: 在按钮上显示的文本
  • iconCls: 定义背景图标显示在按钮的左面的CSS类。
  • handler: 当用户按下按钮时，处理一些事情的函数

标记

<table id="tt"></table>

jQuery

$('#tt').datagrid({

    title:'DataGrid with Toolbar',

    550,

    height:250,

    url:'datagrid_data.json',

    columns:[[

        {field:'itemid',title:'Item ID',80},

        {field:'productid',title:'Product ID',80},

        {field:'listprice',title:'List Price',80,align:'right'},

        {field:'unitcost',title:'Unit Cost',80,align:'right'},

        {field:'attr1',title:'Attribute',100},

        {field:'status',title:'Status',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',

    500,

    height:250,

    url:'datagrid_data.json',

    frozenColumns:[[

        {field:'itemid',title:'Item ID',80},

        {field:'productid',title:'Product ID',80},

    ]],

    columns:[[

        {field:'listprice',title:'List Price',80,align:'right'},

        {field:'unitcost',title:'Unit Cost',80,align:'right'},

        {field:'attr1',title:'Attribute',100},

        {field:'status',title:'Status',60}

    ]]

});

 

o      6.6 动态改变DataGrid列

DataGrid列可以使用columns属性定义。如果你想动态改变列，也没问题。改变列你可以重新调用DataGrid方法平且传递新columns属性。

下面定义DataGrid组件

<table id="tt"></table>

$('#tt').datagrid({

    title:'Change Columns',

    iconCls:'icon-save',

    550,

    height:250,

    url:'datagrid_data.json',

    columns:[[

        {field:'itemid',title:'Item ID',80},

        {field:'productid',title:'Product ID',80},

        {field:'attr1',title:'Attribute',200},

        {field:'status',title:'Status',80}

    ]]

});

运行网页，我们看到：

 

通常，我们想改变列，你可以写这些代码：

$('#tt').datagrid({

    columns:[[

        {field:'itemid',title:'Item ID',80},

        {field:'productid',title:'Product ID',80},

        {field:'listprice',title:'List Price',80,align:'right'},

        {field:'unitcost',title:'Unit Cost',80,align:'right'},

        {field:'attr1',title:'Attribute',100},

        {field:'status',title:'Status',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',

    550,

    height:250,

    url:'datagrid_data.json',

    columns:[[

        {field:'itemid',title:'Item ID',80},

        {field:'productid',title:'Product ID',80},

        {field:'listprice',title:'List Price',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',80,align:'right'},

        {field:'attr1',title:'Attribute',100},

        {field:'status',title:'Status',60}

    ]]

});

 

o      6.8 添加排序到DataGrid

这个事例演示了如何在点击列头的时候排序

 

DataGrid中全部的列可以通过点击列头被排序。你可以定义可以被排序的列。默认的，列不能被排序除非你设置sortable属性为TRUE，下面是例子：

标记

<table id="tt"></table>

jQuery

$('#tt').datagrid({

    title:'Sortable Column',

    550,

    height:250,

    url:'/demo4/data/getItems',

    columns:[[

        {field:'itemid',title:'Item ID',80,sortable:true},

        {field:'productid',title:'Product ID',80,sortable:true},

        {field:'listprice',title:'List Price',80,align:'right',sortable:true},

        {field:'unitcost',title:'Unit Cost',80,align:'right',sortable:true},

        {field:'attr1',title:'Attribute',100},

        {field:'status',title:'Status',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',

    600,

    height:250,

    url:'datagrid_data.json',

    idField:'itemid',

    columns:[[

        {field:'ck',checkbox:true},

        {field:'itemid',title:'Item ID',80},

        {field:'productid',title:'Product ID',80},

        {field:'listprice',title:'List Price',80,align:'right'},

        {field:'unitcost',title:'Unit Cost',80,align:'right'},

        {field:'attr1',title:'Attribute',100},

        {field:'status',title:'Status',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',

    550,

    height:250,

    pagination:true,

    url:'datagrid_data.json',

    columns:[[

        {field:'itemid',title:'Item ID',80},

        {field:'productid',title:'Product ID',80},

        {field:'listprice',title:'List Price',80,align:'right'},

        {field:'unitcost',title:'Unit Cost',80,align:'right'},

        {field:'attr1',title:'Attribute',100},

        {field:'status',title:'Status',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',

    660,

    height:250,

    singleSelect:true,

    idField:'itemid',

    url:'datagrid_data.json',

    columns:[[

        {field:'itemid',title:'Item ID',60},

        {field:'productid',title:'Product',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 Price',80,align:'right',editor:{type:'numberbox',options:{precision:1}}},

        {field:'unitcost',title:'Unit Cost',80,align:'right',editor:'numberbox'},

        {field:'attr1',title:'Attribute',150,editor:'text'},

        {field:'status',title:'Status',50,align:'center',

            editor:{

                type:'checkbox',

                options:{

                    on: 'P',

                    off: ''

                }

            }

        },

        {field:'action',title:'Action',70,align:'center',

            formatter:function(value,row,index){

                if (row.editing){

                    var s = '<a href="http://t.zoukankan.com/huangf714-p-5869826.html#" onclick="saverow('+index+')">Save</a> ';

                    var c = '<a href="http://t.zoukankan.com/huangf714-p-5869826.html#" onclick="cancelrow('+index+')">Cancel</a>';

                    return s+c;

                } else {

                    var e = '<a href="http://t.zoukankan.com/huangf714-p-5869826.html#" onclick="editrow('+index+')">Edit</a> ';

                    var d = '<a href="http://t.zoukankan.com/huangf714-p-5869826.html#" onclick="deleterow('+index+')">Delete</a>';

                    return e+d;

                }

            }

        }

    ]],

    onBeforeEdit:function(index,row){

        row.editing = true;

        $('#tt').datagrid('refreshRow', index);

    },

    onAfterEdit:function(index,row){

        row.editing = false;

        $('#tt').datagrid('refreshRow', index);

    },

    onCancelEdit:function(index,row){

        row.editing = false;

        $('#tt').datagrid('refreshRow', index);

    }

});

使DataGrid可编辑，你应该添加editor属性到列中。editor告诉DataGrid如何编辑字和如何存储值。我们定义了三个editor：text，combobox，checkbox。

添加编辑功能

function editrow(index){

    $('#tt').datagrid('beginEdit', index);

}

function deleterow(index){

    $.messager.confirm('Confirm','Are you sure?',function(r){

        if (r){

            $('#tt').datagrid('deleteRow', index);

        }

    });

}

function saverow(index){

    $('#tt').datagrid('endEdit', index);

}

function cancelrow(index){

    $('#tt').datagrid('cancelEdit', index);

}

 

o      6.12 DataGrid中合并单元格

合并一些单元格经常是必要的，这个教程显示了你如何合并单元格：

合并单元格，简单的调用mergeCells方法并传递信息参数就能告诉DataGrid如何合并单元格了。当单元格合并时，每种东西在合并单元格中，除了第一个单元格，都会被隐藏。

创建DataGrid

<table id="tt"></table>

$('#tt').datagrid({

    title:'Merge Cells',

    iconCls:'icon-ok',

    600,

    height:300,

    singleSelect:true,

    rownumbers:true,

    idField:'itemid',

    url:'datagrid_data.json',

    pagination:true,

    frozenColumns:[[

        {field:'productid',title:'Product',100,

            formatter:function(value){

                for(var i=0; i<products.length; i++){

                    if (products[i].productid == value) return products[i].name;

                }

                return value;

            }

        },

        {field:'itemid',title:'Item ID',80}

    ]],

    columns:[[

        {title:'Price',colspan:2},

        {field:'attr1',title:'Attribute',150,rowspan:2},

        {field:'status',title:'Status',60,align:'center',rowspan:2}

    ],[

        {field:'listprice',title:'List Price',80,align:'right'},

        {field:'unitcost',title:'Unit Cost',80,align:'right'}

    ]]

});

 

合并单元格

当数据被载入，我们在DataGrid中合并一些单元格，所以放置下列代码在onLoadSuccess函数中。

var merges = [{

    index:2,

    rowspan:2

},{

    index:5,

    rowspan:2

},{

    index:7,

    rowspan:2

}];

for(var i=0; i<merges.length; i++)

    $('#tt').datagrid('mergeCells',{

        index:merges[i].index,

        field:'productid',

        rowspan:merges[i].rowspan

    });

 

 

·           7 窗口
  • 我第一个窗口
  • 自定义窗口工具
  • 窗口和版面
  • 创建对话框

 

o      7.1 我第一个窗口

建立窗口时很简单的，我们建立DIV标记：

<div title="My Window" style="300px;height:100px;padding:5px;">

    Some Content.

</div>

然后测试就出出现一个窗口，我们不用写任何js代码

 

如果你想建立看不见的窗口，记住设置closed属性为true，你能调用open方法打开窗口：

<div title="My Window" closed="true" style="300px;height:100px;padding:5px;">

    Some Content.

</div>

$('#win').window('open');

这个演示，我们创建一个登陆窗口

<div title="Login" style="300px;height:180px;">

    <form style="padding:10px 20px 10px 40px;">

        <p>Name: <input type="text"></p>

        <p>Pass: <input type="password"></p>

        <div style="padding:5px;text-align:center;">

            <a href="http://t.zoukankan.com/huangf714-p-5869826.html#" icon="icon-ok">Ok</a>

            <a href="http://t.zoukankan.com/huangf714-p-5869826.html#" icon="icon-cancel">Cancel</a>

        </div>

    </form>

</div>

 

 

o      7.2 自定义窗口工具

默认的窗口有4个工具：collapsible（可折叠）,minimizable（最小化）,maximizable（最大化） 和closable（关闭），例如，我们定义下列窗口：

<div title="My Window" style="padding:10px;200px;height:100px;">

    window content

</div>

 

自定义工具，设置工具为true或者false。例如，我们希望窗口只有一个closeable工具，可以设置任何其他工具为false。我们可以定义工具属性在标记中或者jquery代码中。现在我们使用jquery代码来定义窗口：

$('#win').window({

    collapsible:false,

    minimizable:false,

    maximizable:false

});

 

如果你想添加自定义工具到窗口，我们可以使用tools属性，下面演示了我们添加自己的两个工具：

$('#win').window({

    collapsible:false,

    minimizable:false,

    maximizable:false,

    tools:[{

        iconCls:'icon-add',

        handler:function(){

            alert('add');

        }

    },{

        iconCls:'icon-remove',

        handler:function(){

            alert('remove');

        }

    }]

});

 

 

o      7.3 Window和Layout

版式组件可以嵌套在窗口。我们可以创建复合版面窗口和事件而不用写任何JS代码.jquery-easyui框架在后台帮助我们进行渲染和改变工作。这个例子我们创建窗口，这个窗口有左右两部分。在左窗口，我们建立tree，在右窗口，我们建立tabs内容。

 

<div title="Layout Window" icon="icon-help" style="500px;height:250px;padding:5px;background: #fafafa;">

    <div fit="true">

        <div region="west" split="true" style="120px;">

            <ul class="easyui-tree">

                <li>

                    <span>Library</span>

                    <ul>

                        <li><span>easyui</span></li>

                        <li><span>Music</span></li>

                        <li><span>Picture</span></li>

                        <li><span>Database</span></li>

                    </ul>

                </li>

            </ul>

        </div>

        <div region="center" border="false" border="false">

            <div fit="true">

                <div title="Home" style="padding:10px;">

                    jQuery easyui framework help you build your web page easily.

                </div>

                <div title="Contacts">

                    No contact data.

                </div>

            </div>

        </div>

        <div region="south" border="false" style="text-align:right;height:30px;line-height:30px;">

            <a icon="icon-ok" href="javascript:void(0)">Ok</a>

            <a icon="icon-cancel" href="javascript:void(0)">Cancel</a>

        </div>

    </div>

</div>

看上面的代码，我们只需使用HTML标记，然后复合版面和window就会显示。这个jquery-easyui框架，是容易和强大的。

 

o      7.4 创建对话框

对话框是特殊的窗口，它能包括上面的工具栏和下面的按钮。默认对话框不能改变大小，但是用户可以设置resizeable属性为true来使它可以被改变大小：

 

对话框非常简单，可以使用DIV标记创建：

<div style="padding:5px;400px;height:200px;">

    Dialog Content.

</div>

$('#dd').dialog({

    title:'My Dialog',

    iconCls:'icon-ok',

    toolbar:[{

        text:'Add',

        iconCls:'icon-add',

        handler:function(){

            alert('add')

        }

    },'-',{

        text:'Save',

        iconCls:'icon-save',

        handler:function(){

            alert('save')

        }

    }],

    buttons:[{

        text:'Ok',

        iconCls:'icon-ok',

        handler:function(){

            alert('ok');

        }

    },{

        text:'Cancel',

        handler:function(){

            $('#dd').dialog('close');

        }

    }]

});

上面的代码创一个有工具栏和按钮的对话框。这是对话框、工具栏、内容和按钮的标准设置。

 

 

·           8 Tree
  • 从标记创建tree
  • 创建异步tree
  • 添加tree节点
  • 创建checkbox节点的tree

 

·           8.1从标记创建tree

tree可以被从标记创建。easyui tree应该定义在ul元素中。无序列表ul元素提供了基本tree结构。每一个li元素被产生一个tree节点，子ul元素产生父tree节点。

例子：

    <ul id="tt">

        <li>

            <span>Folder</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>File21</span></li>

    </ul>

创建tree:

$('#tt').tree();

显示：

 

 

·           8.2创建异步Tree

创建异步tree，每一个tree节点必须有id属性，这个属性被传递到检索子节点数据。我们这里例子使用etmvc framework返回json数据。

 

创建HTML标记

<ul id="tt"></ul>

创建jQuery代码

我们使用url属性来指向远程数据

$('#tt').tree({

    url:'/demo2/node/getNodes'    // The url will be mapped to NodeController class and getNodes method

});

数据模型

@Table(name="nodes")

public class Node extends ActiveRecordBase{

    @Id public Integer id;

    @Column public Integer parentId;

    @Column public String name;

 

    public boolean hasChildren() throws Exception{

        long count = count(Node.class, "parentId=?", new Object[]{id});

        return count > 0;

    }

}

写控制代码

如果node是子，记住设置node状态为closed。

public class NodeController extends ApplicationController{

    /**

     * get nodes, if the 'id' parameter equals 0 then load the first level nodes,

     * otherwise load the children nodes

     * @param id the parent node id value

     * @return the tree required node json format

     * @throws Exception

     */

    public View getNodes(int id) throws Exception{

        List<Node> nodes = null;

 

        if (id == 0){    // return the first level nodes

            nodes = Node.findAll(Node.class, "parentId=0 or parentId is null", null);

        } else {    // return the children nodes

            nodes = Node.findAll(Node.class, "parentId=?", new Object[]{id});

        }

 

        List<Map<String,Object>> items = new ArrayList<Map<String,Object>>();

        for(Node node: nodes){

            Map<String,Object> item = new HashMap<String,Object>();

            item.put("id", node.id);

            item.put("text", node.name);

 

            // the node has children,

            // set the state to 'closed' so the node can asynchronous load children nodes

            if (node.hasChildren()){

                item.put("state", "closed");

            }

            items.add(item);

        }

 

        return new JsonView(items);

    }

}

数据配置实例

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

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中。
  • 运行程序

 

·           8.3 添加节点

本教程显示了如何添加节点。我们建立foods tree，这个tree包括vegetable、fruit节点。然后添加一些fruits到存在的fruit节点。

创建foods tree

首先，我们创建foods tree，代码像这样：

<div style="200px;height:auto;border:1px solid #ccc;">

    <ul url="tree_data.json"></ul>

</div>

注意，tree组件被定义在UL标记，tree节点数据载入tree_data.json。

 

得到父节点

我们点击节点以选择fruit节点，我们添加一些fruits数据。调用getSelected方法来得到节点handle。

var node = $('#tt').tree('getSelected');

getSelect方法的返回值是一个js对象，包括id，text，attributes和target属性。target属性是DOM对象，引用了被选择的节点，使用append方法添加节点。

添加节点：

var node = $('#tt').tree('getSelected');

if (node){

    var nodes = [{

        "id":13,

        "text":"Raspberry"

    },{

        "id":14,

        "text":"Cantaloupe"

    }];

    $('#tt').tree('append', {

        parent:node.target,

        data:nodes

    });

}

当我们添加一些fruits，可以看到：

 

 

·           8.4 创建带有checkbox节点的tree

tree插件允许你创建checkbox tree，如果你点击节点的checkbox，被点击的节点信息得到下和上的继承。例如，点击tomato节点的checkbox，你可以看到vegetables节点现在只被选择一部分。

 

创建tree标记

<ul id="tt"></ul>

创建checkbox tree

using('tree', function(){

    $('#tt').tree({

        url:'tree_data.json',

        checkbox:true

    });

});

我们使用easyloader以动态的载入tree插件。这个特征允许我们载入网页快一点。

 

 

·           9 表单
  • Ajax方式发送表单
  • 添加复合tree到表单
  • 表单检验

o      9.1 Ajax方式发送表单

这个教程显示如何发送表单。我们创建一个例子表单：name，email和phone字段。使用easyui表单插件，我们可以将表单变成ajax表单。表单发送所有的字段到后台处理服务，服务处理和发送一些数据返回前台网页。我们收到返回的数据后显示他。

创建form

<div style="230px;background:#E0ECFF;padding:10px;">

    <form action="/demo5/ProcessServlet" method="post">

        <table>

            <tr>

                <td>Name:</td>

                <td><input name="name" type="text"></input></td>

            </tr>

            <tr>

                <td>Email:</td>

                <td><input name="email" type="text"></input></td>

            </tr>

            <tr>

                <td>Phone:</td>

                <td><input name="phone" type="text"></input></td>

            </tr>

            <tr>

                <td></td>

                <td><input type="submit" value="Submit"></input></td>

            </tr>

        </table>

    </form>

</div>

 

转换成Ajax表单

我们写一些jquery代码使表单以ajax方式发送。注意，当数据返回时，form插件的success函数激发，所以我们可以处理一点事情。

$('#ff').form({

    success:function(data){

        $.messager.alert('Info', data, 'info');

    }

});

服务处理：

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    // TODO Auto-generated method stub

    String name = request.getParameter("name");

    String email = request.getParameter("email");

    String phone = request.getParameter("phone");

    System.out.println(name+":"+email+":"+phone);

    PrintWriter out = response.getWriter();

    out.print("Name:"+name+"<br/>Email:"+email+"<br/>Phone:"+phone);

    out.flush();

    out.close();

}

当我们点击发送按钮时，可以看到；

 

 

o      9.2 给表单添加复合tree字段

复合tree是一种复选框和下拉tree。它能像表单字段一样传递到服务端。在这个教程中，我们建立注册表单，这个表单有name，address，city字段。city字段是一个复合tree字段，用户可以下拉tree面板并选择指定city。

第一步：创建HTML标记

<div style="padding:20px;">

    <h2>Account Information</h2>

    <form action="/demo6/ProcessServlet" method="post">

        <table>

            <tr>

                <td>Name:</td>

                <td><input type="text" name="name" /></td>

            </tr>

            <tr>

                <td>Address:</td>

                <td><input type="text" name="address" /></td>

            </tr>

            <tr>

                <td>City:</td>

                <td><select url="city_data.json" name="city" /></td>

            </tr>

        </table>

    </form>

</div>

我们设置复合tree的url属性，这个字段可以被从服务器端检索tree。注意，字段的class名应该是easyui-combotree，所以我们不需要些任何js代码，复合tree字段就会自动生成。

第二步，创建对话框

我们在对话框中放置表单，这个对话框有发送和取消两个按钮。

$('#dlg').dialog({

    title:'Register',

    310,

    height:250,

    buttons:[{

        text:'Submit',

        iconCls:'icon-ok',

        handler:function(){

            $('#ff').form('submit',{

                success:function(data){

                    $.messager.alert('Info',data,'info');

                }

            });

        }

    },{

        text:'Cancel',

        iconCls:'icon-cancel',

        handler:function(){

            $('#dlg').dialog('close');

        }

    }]

});

 

第三部，写服务程序

服务代码接受表单数据并返回：

public class ProcessServlet extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        String name = request.getParameter("name");

        String address = request.getParameter("address");

        String city = request.getParameter("city");

        System.out.println(name);

        System.out.println(address);

        System.out.println(city);

        PrintWriter out = response.getWriter();

        out.print("Name:"+name+",Address:"+address+",City ID:"+city);

        out.flush();

        out.close();

    }

}

现在我们点击发送按钮，得到一个信息框，显示一些数据。

 

复合tree是非常简单的。我们做设置url属性以检索tree数据。

 

o      9.3  验证表单

本教程将要显示你如何验证表单。easyui框架提供了validatebox插件以验证表单。在这个教程中，我们将要构建联系表单并且应用validatebox插件验证表单。你可以修改它适应自己的要求。

构建表单

让我们构建简单的内容的表单： name, email, subject 和message 字段:

<div style="background:#fafafa;padding:10px;300px;height:300px;">

    <form method="post">

        <div>

            <label for="name">Name:</label>

            <input type="text" name="name" required="true"></input>

        </div>

        <div>

            <label for="email">Email:</label>

            <input type="text" name="email" required="true" validType="email"></input>

        </div>

        <div>

            <label for="subject">Subject:</label>

            <input type="text" name="subject" required="true"></input>

        </div>

        <div>

            <label for="message">Message:</label>

            <textarea name="message" style="height:60px;"></textarea>

        </div>

        <div>

            <input type="submit" value="Submit">

        </div>

    </form>

</div>

我们添加class名为easyui-validatebox到input标记，所以input标记应用验证依照validType属性。

当出现错误的时候阻止表单发送

当用户点击发送按钮，我们应该阻止有错误的表单发送。

$('#ff').form({

    url:'/demo7/ProcessServlet',

    onSubmit:function(){

        return $(this).form('validate');

    },

    success:function(data){

        alert(data);

    }

});

如果表单不可以，出现提示：

 

编写处理代码

最后，我们编写后台处理服务代码，这个代码显示在控制台上的接收参数并发送简单信息到前台页面。

public class ProcessServlet extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        String name = request.getParameter("name");

        String email = request.getParameter("email");

        String subject = request.getParameter("subject");

        String message = request.getParameter("message");

        System.out.println("Name:"+name);

        System.out.println("Email:"+email);

        System.out.println("Subject:"+subject);

        System.out.println("Message:"+message);

 

        PrintWriter out = response.getWriter();

        out.println("ok");

        out.close();

    }

 

标签：#面板数据#表单验证#string#datagrid#jquery#table | 浏览：379 | 发布日期：

免责声明：文章转载自《Jquery easyui教程》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇freeswitch笔记(8)-esl outbound 填坑笔记Keil 二进制数输入宏下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

redis 在 php 中的应用（key篇）

本文为我阅读了redis参考手册之后结合博友的博客编写，注意 php_redis 和 redis-cli 的区别（主要是返回值类型和参数用法） 目录： KEY（键） DEL EXISTS EXPIRE EXPIREAT keys MOVE PERSIST TTL RANDOMKEY RENAME RENAMENX TYPE SORT KEY（...

jQuery实现全选/反选和批量删除

<%@ page language="java" contentType="text/html; charset=utf-8"     pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.or...

element ui的表格列设置fixed后做动态表格出现表格错乱

最近使用element-UI时，使用table做动态表格，当操作列使用fixed时，动态切换表格列设置设置时就会出现错乱，情况如下：  解决方法： 把el-table-column上的key设成一个随机数Math.random()，每次表头设置完都要更新一下就正常，如下 这样，显示结果就正常了...

jquery实现提示框的效果

先看下效果图 这三个效果是同一个js写出来的，由此可见只要掌握了 我们可以写出格式各样的提示信息，因为css的灵活性，可以让一个熟练掌握css的人将页面玩弄于鼓掌之间，只要开动你的大脑，发挥你的想象力。 效果已定，我们可以梳理一下思路，以往的提示框，其实最简单的我们只要用css就可以写出来，利用a:hover就可以写出来，但是css写出来的效果有一个...

DevExpress WPF让创建绑定到数据的3D图表控件变得更容易（Part 1）

下载DevExpress v20.1完整版 富文本控件难上手？这堂公开课你一定不能错过，不同视图不同应用场景全解！ 通过DevExpress WPF Controls，您能创建有着强大互动功能的XAML基础应用程序，这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 在本教程中，您将完成可视化数据源所需的步骤。 应该执行以下步骤，本文我们将...

【Gstreamer开发】TI嵌入式处理器GStreamer pipeline

Example GStreamer Pipelines From Texas Instruments Embedded Processors Wiki Jump to: navigation, search Translate this page to Translate Example GStreamer Pipelines MAINTENANCE...

最新文章

随机推荐

思享工具箱导航