UI组件：ext、JqueryEasyUI、miniui、dhtmlx及自定义页面

　　这篇博文主要是分析下当前经常使用到的UI组件，他们的效果和功能一般都可以满足我们平常项目使用，但对于较复杂些的项目建议你要斟酌下再决定是否使用？如何去用？尤其是字段和数据源都是后台动态生成那么考验性更大……

需求：列表页展现数据，其中列头（一般在50个以上）和数据源都是后台动态生成，每页展示10条数据、排序、列拖动等功能

 

要求效果：

 

方法一：后台拼凑

Json格式生成Table

页面加载速度：

使用结果来看：

　　优点：速度、体验性综合排名第二

　　缺点：列拖动用了第三方jquery插件但是效果上不是很好，另外虽然是ajax无刷新页面加载数据但是在排序、分页时数据表格需要重新绘制所以会有点给人抖动的感觉

 

方法二：JqueryEasyUI

部分主要源码：

    <script type="text/javascript">
      
        $(function() {
            $('#myGrid').datagrid({
                    
                //title:'应用系统列表',  
                loadMsg: "正在加载，请稍等...",
                striped: true,
                showFooter:true,
                //collapsible:true,//展开
                //sortName:排序字段，
                //sortOrder：排序方式：asc|desc
                //queryWord：查询关键字
                //queryType：查询字段。
                url: '/Ajax/Normal.ashx?action=normalEasyUI&mouldId=<%=mouldId %>',
                //sortName: 'CustID',//排序字段
                sortOrder: 'desc',
                sortable:true,
                remoteSort: false, 
                //idField:'productid',
                pagination:true,
                rownumbers:true, 
                onSortColumn:function(sort,order){ FieldSort(sort,order);},//调用排序方法。},
                frozenColumns: [
                    [
                        { field: 'ck', width:fillsize(0.02), checkbox: true },
                        { field: 'sc',width:fillsize(0.02), title: '收藏', formatter: function() {
                            return "<a href=\"\">收藏</a>";
                        }
                        },
                    { field: 'xq', width:fillsize(0.04), title: '查看详情', formatter: function() {
                        return "<a href=\"\">查看详情</a>";
                    } }]]
             
                });
            //设置分页控件
            var p = $('#myGrid').datagrid('getPager');
            $(p).pagination({
                    pageSize: 10, //每页显示的记录条数，默认为10           
                    pageList: [10, 20, 30], //可以设置每页记录条数的列表           
                    beforePageText: '第', //页数文本框前显示的汉字           
                    afterPageText: '页    共 {pages} 页',
                    displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录' ,
                    onBeforeRefresh:function(){ 
                        $(this).pagination('loading'); 
                        alert('before refresh'); 
                        $(this).pagination('loaded'); 
                    } 
            });
            
            
        });
        /*排序*/
        function FieldSort(sortName,sortOrder){   
            var queryParams = $('#myGrid').datagrid('options').queryParams;  
            queryParams.sortName = sortName;  
            queryParams.sortOrder = sortOrder;   
            $("#myGrid").datagrid('reload');   
        }  
        
        $(function(){ 
            $(".select").find("li:not(.choosen)").click(function(){  
                var value = $(this).attr("value") ; 
                var id= getSingleSelectRow("myGrid","FID")
                if(id==""&&value<3){
                    $.messager.alert('提示消息', "请选择一行数据操作!", 'info');
                    return ;
                }
                if(id==""&&value==3){
                    $.messager.alert('提示消息', "请选择需要删除的数据!", 'info');
                    return ;
                }
                var mouldId=$("#ctl00_FumaHead_hidMouldID").val();
                switch(value){
                    case 0:
                        //新建：
                        window.open("/PageStructure/Detail/Detail.aspx?mouldId="+mouldId+"&detailId=&opt="+value);
                        break;
                    case 1: 
                        //修改：
                        window.open("/PageStructure/Detail/Detail.aspx?mouldId="+mouldId+"&detailId="+id+"&opt="+value);
                        break;
                    case 2: 
                        //打开： 
                        window.open("/PageStructure/Detail/Detail.aspx?mouldId="+mouldId+"&detailId="+id+"&opt="+value); 
                        break;
                    case 3: 
                        var  quesition=window.confirm("删除不可恢复！确定要删除吗？");   
                        //$.messager.alert('提示消息', '请选择你要删除的记录!', 'info');
                        //$.messager.confirm('确认', confirmMessage, function (r) {if (r) {}else{}}
                        /*
                        var deleteId="";
                        for(i=0;i<chkList.length;i++){
                            deleteId += "'"+chkList[i].id + "' , ";
                        } 
                        var  quesition=window.confirm("删除不可恢复！确定要删除吗？");   
                        if(quesition==true){ 
                            $.ajax({
                                type:"get",
                                contentType:"application/json;charset:utf-8",
                                url:"/Ajax/AjaxMethod.ashx?action=operateDelete&mouldId="+mouldId+"&id="+deleteId,
                                success:function(msg){
                                    if(msg=="success"){
                                         $("#lblList").grid({mouldId:mouldId, url:"/Ajax/AjaxMethod.ashx"});
                                    }
                                    else if(msg=="failed"){
                                        alert("删除失败！");
                                    }
                                    else{ 
                                    }
                                }
                            });
                            return  true;
                        }
                        else{
                            //alert("no");
                        }  
                        //删除
                        break;
                        */
                } 
            }); 
        });
        /**
        *自适应表格的宽度处理(适用于Jquery Easy Ui中的dataGrid的列宽),
        *注：可以实现列表的各列宽度跟着浏览宽度的变化而变化，即采用该方法来设置DataGrid
        *的列宽可以在不同分辨率的浏览器下自动伸缩从而满足不同分辨率浏览器的要求
        *使用方法：(如:{field:'ymName',title:'编号',width:fillsize(0.08),align:'center'},)
        *
        *@parampercent当前列的列宽所占整个窗口宽度的百分比(以小数形式出现，如0.3代表30%)
        *
        *@return通过当前窗口和对应的百分比计算出来的具体宽度
        */
        function fillsize(percent) {
            var bodyWidth = document.body.clientWidth;
            return (bodyWidth - 90) * percent;
        }

        /**
        * 获取所选记录行(单选)
        *
        * @paramdataTableId目标记录所在的DataGrid列表的table的id
        * @paramerrorMessage 如果没有选择一行(即没有选择或选择了多行)的提示信息
        *
        * @return 所选记录行对象，如果返回值为null,或者"null"(有时浏览器将null转换成了字符串"null")说明没有
        *选择一行记录。
        */
        function getSingleSelectRow(dataTableId, fieldValue) {
            var rows = $("#" + dataTableId).datagrid('getSelections');
            var num = rows.length;
            if (num == 1) {
                return rows[0][fieldValue];
            }
            else if(num>1){
                return rows;
            } 
            else { 
                return "";
            }
        }
    </script>

后台数据同上拼凑Json格式数据

Json格式注意 context.Response.Write("{\"total\":" + total + ",\"rows\":" + Common.Class.JsonHelper.DataTable2Json(SourceTable) + "}");

页面加载速度：

使用结果来看：

　　优点：界面要求的效果达标，数据量少的可以使用，数据量大建议考虑下。

　　缺点：加载速递慢 排名末尾

方法三：MiniUI

部分主要源码：<%=sb.ToString() %> 一次性加载列头

 

 <%--miniui--%>
    <link href="miniui/miniui/themes/default/miniui.css" rel="stylesheet" type="text/css" />
    <link href="miniui/miniui/themes/icons.css" rel="stylesheet" type="text/css" />

    <script src="miniui/miniui/miniui.js" type="text/javascript"></script>

    <%--end--%>    

    <div id="datagrid1" class="mini-datagrid" style="width: 98%;margin:auto auto; height: auto; overflow:hidden;" url='/Ajax/Normal.ashx?action=normalMiniUI&mouldId=<%=mouldId %>'
            idfield="id" allowresize="true" sizelist="[10,20,30]" pagesize="10" multiselect="true"
            allowalternating="true" showemptytext="true" allowmovecolumn="false" emptytext="抱歉，没有找到符合您搜索条件的数据"
            showsummaryrow="true" onload="onGridLoad">
            <%=sb.ToString() %>
        </div>

 

Json格式注意 context.Response.Write("{\"total\":" + total + sbSummay + " ,\"data\":" + Common.Class.JsonHelper.DataTable2Json(SourceTable) + "}");

页面加载速度：

 

 

使用结果来看：

　　优点： 在功能、编码上和JqueryEasyUI大同小异，但加载速递比easyui快

　　缺点：加载速递要是更好些会更好 综合排名第三

 

 

方法四：DHTMLX

部分主要源码：

 

        var pageIndex=1;
        var pageSize=10;
        $(function(){  
            List(pageIndex,pageSize);
        }); 
        
        
        function List(pageIndex,pageSize){ 
            if($(".pagebar").size()>0){
                $(".pagebar").remove();
            }
             $.ajax({
                    type:"get",
                    contentType:"application/json;charset=utf-8",
                    data:{mouldId:$("#ctl00_FumaHead_hidMouldID").val(),action:"normalDHTMLX",pageIndex:pageIndex,pageSize:pageSize},
                    cache:false,
                    url:"/Ajax/Normal.ashx",
                    success: function(result) { 
                        if(result.length<=0)return; 
                        var json = eval("("+result+")");
                        $("#lblList").html(json.data); 
                        dhtmlx.skin = "dhx_skyblue"; 
                        new dhtmlXGridFromTable('gvList');  
                    }
             }); 
        }

 

Dhtmlx Grid数据源可以是：XML、Json、Table等

页面加载速度：

 

 

使用结果来看：

　　优点： 没得说 加载速度、体验性等等目前排名第一

　　缺点：资料太少、大多数资料是英文

方法五：Ext.NET

部分主要源码：

 

 <ext:Viewport ID="vpNormal" runat="server" Layout="FitLayout">
        <Items>
            <ext:Panel ID="pnNormal" runat="server" Border="false">
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:Button ID="btnTopAdd" runat="server" Text="新建" Icon="Add" />
                            <ext:Button ID="btnTopOpen" runat="server" Text="打开" Icon="FolderUp" />
                            <ext:Button ID="btnTopEdit" runat="server" Text="编辑" Icon="FolderEdit" />
                            <ext:Button ID="btnTopDelete" runat="server" Text="删除" Icon="Delete" />
                            <ext:ToolbarSeparator />
                            <ext:SplitButton runat="server" Text="打印" Icon="Printer">
                                <Menu>
                                    <ext:Menu ID="Menu0" runat="server">
                                        <Items>
                                            <ext:MenuItem ID="btnTopPrintTemp" runat="server" Icon="PrinterColor" Text="设置打印模板" />
                                            <ext:MenuItem ID="btnTopPrinList" runat="server" Icon="PrinterMono" Text="报表列表" />
                                            <ext:MenuItem ID="btnTopPrinPerson" runat="server" Icon="PrinterEmpty" Text="个人分组" />
                                        </Items>
                                    </ext:Menu>
                                </Menu>
                            </ext:SplitButton>
                            <ext:ToolbarSeparator />
                            <ext:SplitButton runat="server" Text="关联" Icon="Link">
                                <Menu>
                                    <ext:Menu ID="Menu1" runat="server">
                                        <Items>
                                            <ext:MenuItem ID="btnLink" runat="server" Icon="LinkAdd" Text="关联" />
                                        </Items>
                                    </ext:Menu>
                                </Menu>
                            </ext:SplitButton>
                            <ext:ToolbarSeparator />
                            <ext:SplitButton runat="server" Text="导出Excel" Icon="PageWhiteExcel">
                                <Menu>
                                    <ext:Menu runat="server" ID="Menu2">
                                        <Items>
                                            <ext:MenuItem ID="btnExcel" runat="server" Icon="PageWhiteExcel" Text="按选择列导出" />
                                        </Items>
                                    </ext:Menu>
                                </Menu>
                            </ext:SplitButton>
                            <ext:SplitButton runat="server" Text="历史" Icon="Pencil">
                                <Menu>
                                    <ext:Menu runat="server" ID="Menu3">
                                        <Items>
                                            <ext:MenuItem ID="btnHistory" runat="server" Icon="PencilGo" Text="修改历史" />
                                        </Items>
                                    </ext:Menu>
                                </Menu>
                            </ext:SplitButton>
                            <ext:SplitButton runat="server" Text="自定义" Icon="Wrench">
                                <Menu>
                                    <ext:Menu runat="server" ID="Menu4">
                                        <Items>
                                            <ext:MenuItem ID="btnWrench" runat="server" Icon="WrenchOrange" Text="模块设置" />
                                        </Items>
                                    </ext:Menu>
                                </Menu>
                            </ext:SplitButton>
                            <ext:ToolbarSeparator />
                            <ext:Button ID="btnTopHelp" runat="server" Text="帮助" Icon="Help" />
                            <ext:Button ID="btnTopClose" runat="server" Text="关闭" Icon="Stop" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:BorderLayout ID="blNormal" runat="server">
                        <%-- 搜索--%>
                        <West MinWidth="10" MaxWidth="500" Split="true" CollapseMode="Mini">
                            <ext:TabPanel runat="server" Width="280" Frame="true" ID="tpnlSelect">
                                <Items>
                                    <ext:Panel runat="server" AutoScroll="true" Title="查询" Padding="6" ID="pnlSelect">
                                        <Items>
                                            <ext:Label runat="server" Html="<font   style='font-weight:bolder;font-size:13px' >按下面任何标准进行搜索</font>" />
                                            <ext:Panel runat="server" Border="false" Padding="6">
                                                <Items>
                                                    <ext:FormPanel Border="false" runat="server" LabelWidth="70" ID="pnlSearch">
                                                        <Items>
                                                            <ext:CompositeField AnchorHorizontal="100%" runat="server" LabelAlign="Top" FieldLabel="关键字">
                                                                <Items>
                                                                    <ext:TextField ID="txtKeyWord" EmptyText="关键字" LabelAlign="Top" runat="server" Width="140" />
                                                                </Items>
                                                            </ext:CompositeField>
                                                            <ext:CompositeField runat="server" FieldLabel="在这儿查找">
                                                                <Items>
                                                                    <ext:MultiCombo runat="server" Width="140" ID="mcbSelect" EmptyText="请选择寻找范围" SelectionMode="Checkbox">
                                                                    </ext:MultiCombo>
                                                                </Items>
                                                            </ext:CompositeField>
                                                            <ext:CompositeField runat="server" FieldLabel="精确查找">
                                                                <Items>
                                                                    <ext:Checkbox ID="chkExactMatch" runat="server" FieldLabel="精确查找">
                                                                    </ext:Checkbox>
                                                                </Items>
                                                            </ext:CompositeField>
                                                        </Items>
                                                    </ext:FormPanel>
                                                </Items>
                                            </ext:Panel>
                                            <ext:Panel ID="pnlHighSearch" runat="server" Title="更多高级选项" FormGroup="true" Visible="false" />
                                        </Items>
                                        <Buttons>
                                            <ext:Button ID="btmReset" Type="Reset" runat="server" Text="清  空">
                                                <DirectEvents>
                                                    <Click OnEvent="btmReset_Click" />
                                                </DirectEvents>
                                            </ext:Button>
                                            <ext:Button ID="btnSearch" runat="server" Text="搜  索">
                                                <DirectEvents>
                                                    <Click OnEvent="BtnSearch_Click" />
                                                </DirectEvents>
                                            </ext:Button>
                                        </Buttons>
                                    </ext:Panel>
                                </Items>
                            </ext:TabPanel>
                        </West>
                        <%--主页--%>
                        <Center>
                            <ext:TabPanel ID="TabPanel2" runat="server" Frame="true">
                                <Items>
                                    <%--列表显示--%>
                                    <ext:Panel ID="Panel8" runat="server" Title="列表显示">
                                        <Items>
                                            <ext:BorderLayout ID="BorderLayout2" runat="server">
                                                <Center>
                                                    <ext:Panel ID="Panel9" runat="server" Layout="FitLayout" Frame="true">
                                                        <Items>
                                                            <ext:GridPanel runat="server" ID="gpMain" StoreID="stMain" StripeRows="true" TrackMouseOver="true">
                                                                <ColumnModel ID="ColumnModel1" runat="server">
                                                                    <Columns>
                                                                        <ext:RowNumbererColumn Locked="true" />
                                                                    </Columns>
                                                                </ColumnModel>
                                                                <View>
                                                                    <ext:LockingGridView />
                                                                </View>
                                                                <BottomBar>
                                                                    <ext:PagingToolbar ID="PgbListMain" runat="server" PageSize="50" StoreID="stMain">
                                                                        <Items>
                                                                            <ext:Label ID="lblSearchTime" runat="server">
                                                                            </ext:Label>
                                                                        </Items>
                                                                    </ext:PagingToolbar>
                                                                </BottomBar>
                                                                <LoadMask ShowMask="true" />
                                                            </ext:GridPanel>
                                                        </Items>
                                                    </ext:Panel>
                                                </Center>
                                                <South Split="true" CollapseMode="Mini">
                                                    <ext:TabPanel ID="pnlSouth" runat="server" Height="230" Visible="false" Frame="true">
                                                        <Items>
                                                        </Items>
                                                    </ext:TabPanel>
                                                </South>
                                            </ext:BorderLayout>
                                        </Items>
                                    </ext:Panel>
                                </Items>
                            </ext:TabPanel>
                        </Center>
                    </ext:BorderLayout>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>

 

页面加载速度：

 

 

使用结果来看：

　　优点：个人看法：和asp.net一样

　　缺点：速度上要再提高，生成页面带了大量html  当然如果你的数据量不大可以考虑ext.net

 

 

 

通过上面的比较不难发现DHTMLX胜出其次是自己动态拼凑的页面，miniui、ext不分伯仲，当然了具体问题还要具体分析。

 

 

 部分demo