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