這篇博文主要是分析下當(dāng)前經(jīng)常使用到的UI組件，他們的效果和功能一般都可以滿足我們平常項(xiàng)目使用，但對于較復(fù)雜些的項(xiàng)目建議你要斟酌下再決定是否使用？如何去用？尤其是字段和數(shù)據(jù)源都是后臺動態(tài)生成那么考驗(yàn)性更大……

需求：列表頁展現(xiàn)數(shù)據(jù)，其中列頭（一般在50個(gè)以上）和數(shù)據(jù)源都是后臺動態(tài)生成，每頁展示10條數(shù)據(jù)、排序、列拖動等功能

?

要求效果：

?

方法一：后臺拼湊

Json格式生成Table

頁面加載速度：

使用結(jié)果來看：

　　優(yōu)點(diǎn)：速度、體驗(yàn)性綜合排名第二

　　缺點(diǎn)：列拖動用了第三方j(luò)query插件但是效果上不是很好，另外雖然是ajax無刷新頁面加載數(shù)據(jù)但是在排序、分頁時(shí)數(shù)據(jù)表格需要重新繪制所以會有點(diǎn)給人抖動的感覺

?

方法二：JqueryEasyUI

部分主要源碼：

View Code <script type="text/javascript">$(function() {$('#myGrid').datagrid({//title:'應(yīng)用系統(tǒng)列表', loadMsg: "正在加載，請稍等...",striped: true,showFooter:true,//collapsible:true,//展開//sortName:排序字段，//sortOrder：排序方式：asc|desc//queryWord：查詢關(guān)鍵字//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);},//調(diào)用排序方法。}, 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>";} }]]});//設(shè)置分頁控件var p = $('#myGrid').datagrid('getPager');$(p).pagination({pageSize: 10, //每頁顯示的記錄條數(shù)，默認(rèn)為10 pageList: [10, 20, 30], //可以設(shè)置每頁記錄條數(shù)的列表 beforePageText: '第', //頁數(shù)文本框前顯示的漢字 afterPageText: '頁 共 {pages} 頁',displayMsg: '當(dāng)前顯示 {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('提示消息', "請選擇一行數(shù)據(jù)操作!", 'info');return ;}if(id==""&&value==3){$.messager.alert('提示消息', "請選擇需要?jiǎng)h除的數(shù)據(jù)!", '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("刪除不可恢復(fù)！確定要?jiǎng)h除嗎？"); //$.messager.alert('提示消息', '請選擇你要?jiǎng)h除的記錄!', 'info');//$.messager.confirm('確認(rèn)', confirmMessage, function (r) {if (r) {}else{}}/*var deleteId="";for(i=0;i<chkList.length;i++){deleteId += "'"+chkList[i].id + "' , ";} var quesition=window.confirm("刪除不可恢復(fù)！確定要?jiǎng)h除嗎？"); 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;*/} }); });/***自適應(yīng)表格的寬度處理(適用于Jquery Easy Ui中的dataGrid的列寬),*注：可以實(shí)現(xiàn)列表的各列寬度跟著瀏覽寬度的變化而變化，即采用該方法來設(shè)置DataGrid*的列寬可以在不同分辨率的瀏覽器下自動伸縮從而滿足不同分辨率瀏覽器的要求*使用方法：(如:{field:'ymName',title:'編號',width:fillsize(0.08),align:'center'},)**@parampercent當(dāng)前列的列寬所占整個(gè)窗口寬度的百分比(以小數(shù)形式出現(xiàn)，如0.3代表30%)**@return通過當(dāng)前窗口和對應(yīng)的百分比計(jì)算出來的具體寬度*/function fillsize(percent) {var bodyWidth = document.body.clientWidth;return (bodyWidth - 90) * percent;}/*** 獲取所選記錄行(單選)** @paramdataTableId目標(biāo)記錄所在的DataGrid列表的table的id* @paramerrorMessage 如果沒有選擇一行(即沒有選擇或選擇了多行)的提示信息** @return 所選記錄行對象，如果返回值為null,或者"null"(有時(shí)瀏覽器將null轉(zhuǎn)換成了字符串"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>

后臺數(shù)據(jù)同上拼湊Json格式數(shù)據(jù)

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

頁面加載速度：

使用結(jié)果來看：

　　優(yōu)點(diǎn)：界面要求的效果達(dá)標(biāo)，數(shù)據(jù)量少的可以使用，數(shù)據(jù)量大建議考慮下。

　　缺點(diǎn)：加載速遞慢 排名末尾

方法三：MiniUI

部分主要源碼：<%=sb.ToString() %> 一次性加載列頭

?

View Code <%--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="抱歉，沒有找到符合您搜索條件的數(shù)據(jù)"showsummaryrow="true" οnlοad="onGridLoad"><%=sb.ToString() %></div>

?

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

頁面加載速度：

?

?

使用結(jié)果來看：

　　優(yōu)點(diǎn)： 在功能、編碼上和JqueryEasyUI大同小異，但加載速遞比easyui快

　　缺點(diǎn)：加載速遞要是更好些會更好 綜合排名第三

?

?

方法四：DHTMLX

部分主要源碼：

?

View Code 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數(shù)據(jù)源可以是：XML、Json、Table等

頁面加載速度：

?

?

使用結(jié)果來看：

　　優(yōu)點(diǎn)： 沒得說 加載速度、體驗(yàn)性等等目前排名第一

　　缺點(diǎn)：資料太少、大多數(shù)資料是英文

方法五：Ext.NET

部分主要源碼：

?

View Code <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="設(shè)置打印模板" /><ext:MenuItem ID="btnTopPrinList" runat="server" Icon="PrinterMono" Text="報(bào)表列表" /><ext:MenuItem ID="btnTopPrinPerson" runat="server" Icon="PrinterEmpty" Text="個(gè)人分組" /></Items></ext:Menu></Menu></ext:SplitButton><ext:ToolbarSeparator /><ext:SplitButton runat="server" Text="關(guān)聯(lián)" Icon="Link"><Menu><ext:Menu ID="Menu1" runat="server"><Items><ext:MenuItem ID="btnLink" runat="server" Icon="LinkAdd" Text="關(guān)聯(lián)" /></Items></ext:Menu></Menu></ext:SplitButton><ext:ToolbarSeparator /><ext:SplitButton runat="server" Text="導(dǎo)出Excel" Icon="PageWhiteExcel"><Menu><ext:Menu runat="server" ID="Menu2"><Items><ext:MenuItem ID="btnExcel" runat="server" Icon="PageWhiteExcel" Text="按選擇列導(dǎo)出" /></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="模塊設(shè)置" /></Items></ext:Menu></Menu></ext:SplitButton><ext:ToolbarSeparator /><ext:Button ID="btnTopHelp" runat="server" Text="幫助" Icon="Help" /><ext:Button ID="btnTopClose" runat="server" Text="關(guān)閉" 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' >按下面任何標(biāo)準(zhǔn)進(jìn)行搜索</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="關(guān)鍵字"><Items><ext:TextField ID="txtKeyWord" EmptyText="關(guān)鍵字" 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="更多高級選項(xiàng)" 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>

?

頁面加載速度：

?

?

使用結(jié)果來看：

　　優(yōu)點(diǎn)：個(gè)人看法：和asp.net一樣

　　缺點(diǎn)：速度上要再提高，生成頁面帶了大量html? 當(dāng)然如果你的數(shù)據(jù)量不大可以考慮ext.net

?

?

?

通過上面的比較不難發(fā)現(xiàn)DHTMLX勝出其次是自己動態(tài)拼湊的頁面，miniui、ext不分伯仲，當(dāng)然了具體問題還要具體分析。

?

?

?部分demo

轉(zhuǎn)載于:https://www.cnblogs.com/aaa6818162/archive/2013/03/28/2986589.html

總結(jié)

以上是生活随笔為你收集整理的UI组件：ext、JqueryEasyUI、miniui、dhtmlx及自定义页面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。