easyui

javalinjx

浏览: 86915 次
性别:
来自: 北京

最近访客更多访客>>

shooray

netants999

zhouguofeng

cojy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

JavaScript UI

jquery easyUI分析报告

设计目的

使得开发web网站更容易.

easyui收集了许多基于jquery的用户界面插件.
开发者可以编写更少的javascript代码,而只需要编写一些html标志定义好用户界面.
easyui非常简单但是非常强大.

优点

相比extjs组件级的开发,easyui更接近于html.不仅适合通用网站开发,也可以用来开发企业级的网站.
如果说extjs是航空母舰,那么easyui就是瑞士军刀.
效率要比extjs要好.

缺点

在ie6下会有一些兼容性的问题.
它不是开源的,发布的代码混淆并压缩过.一旦出了问题,会让人抓狂的.看这里
它的文档太少,论坛也比较冷清.支撑easyUI的人就那么官方的几个.
它的走向不确定,以后可能会商业收费
它的布局组件也比较少,如果让开发人员自己来布局,那么很考开发人员的前端基本功哦.

开源问题的说明: 通过搜索引擎还是能找到的.在这里. 问题在于为什么被遮盖起来呢？所有的地方都没有任何关于源代码的说明。这个地址也是被关上了。要不是有搜索引擎，你根本找不到。我估计如果不是无法彻底关闭非登录用户，我估计你就是看到了也进不去。

数据模型与技术分析

 
    数据模型是多样的,所有的控件统一支持json格式的数据.如果使用这个框架,那么后台的代码基本不用动.
开发人员定义好html标志后,再编写少量的js代码.easyui会根据html标志,调用相关的组件生成程序.绑定相关的样式和事件.
下面是一个easyui官方提供的可编辑列表的示例.

可编辑列表示例

列表的数据结构是这样的:

04

{"total":28,"rows":[

05

    {"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},

06

    {"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},

07

    {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":28.50,"attr1":"Venomless","itemid":"EST-11"},

08

    {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},

09

    {"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},

10

    {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},

11

    {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},

12

    {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":63.50,"attr1":"Adult Female","itemid":"EST-16"},

13

    {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},

14

    {"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}

15
]}

代码如下所示:

004
<html>

005
<head>

006

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

007

    <title>jQuery EasyUI</title>

008

    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">

009

    <link rel="stylesheet" type="text/css" href="../themes/icon.css">

010

    <script type="text/javascript" src="../jquery-1.4.4.min.js"></script>

011

    <script type="text/javascript" src="../jquery.easyui.min.js"></script>

012

    <script>

013

        var products = [

014

            {productid:'FI-SW-01',name:'Koi'},

015

            {productid:'K9-DL-01',name:'Dalmation'},

016

            {productid:'RP-SN-01',name:'Rattlesnake'},

017

            {productid:'RP-LI-02',name:'Iguana'},

018

            {productid:'FL-DSH-01',name:'Manx'},

019

            {productid:'FL-DLH-02',name:'Persian'},

020

            {productid:'AV-CB-01',name:'Amazon Parrot'}

021

        ];

022

        function productFormatter(value){

023

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

024

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

025

            }

026

            return value;

027

        }

028

        $(function(){

029

            var lastIndex;

030

            $('#tt').datagrid({

031

                toolbar:[{

032

                    text:'append',

033

                    iconCls:'icon-add',

034

                    handler:function(){

035

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

036

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

037

                            itemid:'',

038

                            productid:'',

039

                            listprice:'',

040

                            unitprice:'',

041

                            attr1:'',

042

                            status:'P'

043

                        });

044

                        var lastIndex = $('#tt').datagrid('getRows').length-1;

045

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

046

                    }

047

                },'-',{

048

                    text:'delete',

049

                    iconCls:'icon-remove',

050

                    handler:function(){

051

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

052

                        if (row){

053

                            var index = $('#tt').datagrid('getRowIndex', row);

054

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

055

                        }

056

                    }

057

                },'-',{

058

                    text:'accept',

059

                    iconCls:'icon-save',

060

                    handler:function(){

061

                        $('#tt').datagrid('acceptChanges');

062

                    }

063

                },'-',{

064

                    text:'reject',

065

                    iconCls:'icon-undo',

066

                    handler:function(){

067

                        $('#tt').datagrid('rejectChanges');

068

                    }

069

                },'-',{

070

                    text:'getChanges',

071

                    iconCls:'icon-search',

072

                    handler:function(){

073

                        var rows = $('#tt').datagrid('getChanges');

074

                        alert('changed rows: ' + rows.length + ' lines');

075

                    }

076

                }],

077

                onBeforeLoad:function(){

078

                    $(this).datagrid('rejectChanges');

079

                },

080

                onClickRow:function(rowIndex){

081

                    if (lastIndex != rowIndex){

082

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

083

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

084

                    }

085

                    lastIndex = rowIndex;

086

                }

087

            });

088

        });

089

    </script>

090
</head>

091
<body>

092

    <h1>Editable DataGrid</h1>

093

    <table id="tt" style="width:650px;height:auto"

094

            title="Editable DataGrid" iconCls="icon-edit" singleSelect="true"

095

            idField="itemid" url="datagrid_data2.json">

096

        <thead>

097

            <tr>

098

                <th field="itemid" width="80">Item ID</th>

099

                <th field="productid" width="100" formatter="productFormatter" editor="{type:'combobox',options:{valueField:'productid',textField:'name',data:products,required:true}}">Product</th>

100

                <th field="listprice" width="80" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>

101

                <th field="unitcost" width="80" align="right" editor="numberbox">Unit Cost</th>

102

                <th field="attr1" width="150" editor="text">Attribute</th>

103

                <th field="status" width="60" align="center" editor="{type:'checkbox',options:{on:'P',off:''}}">Status</th>

104

            </tr>

105

        </thead>

106

    </table>

107
</body>

108
</html>

简要说明一下:

上例子定义了一个标志为table的dom元素,调用js代码 $('#tt').datagrid() 会生成一个grid列表,它还可以传递一个object级的对象充当配置元素.

如上例中配置的就是一个工具栏.

初步结论

easyui适用于开发简单的通用网站,对于企业级的项目开发存在比较大的风险.它不是开源的,它发布的源码经过混淆和压缩,一旦出了问题,将会很难调试. 另外,easyui是基于jquery的,jquery是比较容易上手,但要精通它很困难的,因为它的源码很有点天马行空的风格.所以我认为,easyui是有一定的学习门槛的, 尤其是在它不开源的情况下.这个风险要慎重评估.

一个可行的方案

一个可行的方案是有条件地选择它收集的jquery-ui插件,在开发过程中通过easyloader动态加载用户控件脚本. 目前这些源码还可以通过svn签出来.地址在这里, 但它的学习门槛也比较高.因为开发人员需要自己去扩展它去适应多变的业务需求.

转载自：

http://www.cnblogs.com/ms_config/archive/2011/02/17/1957208.html

分享到：

easyui

2011-07-30 18:12
浏览 6517
评论(1)
分类:Web前端
查看更多

1 楼 wangsuiri 2012-01-17

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

easyui

jquery easyUI分析报告

设计目的

相关资源

优点

缺点

数据模型与技术分析

初步结论

一个可行的方案

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

easyui

jquery easyUI分析报告

设计目的

相关资源

优点

缺点

数据模型与技术分析

初步结论

一个可行的方案

评论

发表评论

相关推荐

jQuery选择器的分类

easyui

最近访客更多访客>>