Easyui性能问题

分享到:
  来源:急速科技  发布时间:2012-08-14  浏览次数:8941

  Jquery EasyUI JQGrid

       最近做了个管理系统,由于客户机主要用的是IE6,电脑配置也差,导致tab内的datagrid渲染速度极慢(需要好几秒时间)。通过请教百度,谷歌,解决方案:datagrid替换成JQGrid  感觉tab内的内容渲染速度明显提升(速度估计在1秒左右,具体还要看客户机)。
       由于JQgrid不是Easyui的一个组件,所以使用便捷性方面会大打折扣;所以目前只是替换经常使用的几个页面。以下是一个统计查询页面:表头动态加载
以下包含toolbar实现方式:
<div id="gridloding_${HtmTemp.MenuID}" class ="panel-loading">
    Loading... </div>
<!--toolbar  默认设置为影藏-->
<div id="toolbar_${HtmTemp.MenuID}" class ="ui-jqgrid-searchbar ui-widget-header" style="display :none;">
    <form method="get" action="/Common/StatGrid.aspx\?type=OA.Model.${HtmTemp.Entity}&mid=$HtmTemp.MenuID"
    id="formwinStat${HtmTemp.MenuID}">
    开始时间:
    <input type="text" name="start" class="easyui-validatebox" data-options="required:true"
        onclick="WdatePicker({minDate:'2013-04-01',maxDate:'$DateTime'})" />
    结束时间:
    <input type="text" class="easyui-validatebox" name="end" data-options="required:true"
        onclick="WdatePicker({minDate:'2013-04-01',maxDate:'$DateTime'})" />< input type ="hidden"
            name="type" value="OA.Model.${HtmTemp.Entity}" />
    客户账号:
    <input type="text" class="easyui-numberbox" name="account" data-options="required:false" />
    客户姓名:
    <input type="text" name="name" data-options="required:false" />
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="$('#formwinStat${HtmTemp.MenuID}').submit();">
        查询 </a>
    </form>
</div>
<table id='grid_Stat${HtmTemp.MenuID}'>
</table>
<script type="text/javascript">
    var mid = $HtmTemp.MenuID; var templateFrozenColumns = []; var type = 'OA.Model.${HtmTemp.Entity}' ;
        jQuery.getJSON( '/Common/StatGrid.aspx\?type=' + type + '&mid=' + mid, function (resp) {
 
            jQuery( "#grid_Stat$HtmTemp.MenuID" ).jqGrid({
                datatype: "local", rownumbers: true , jsonReader: { root: "rows", total: "pages", records: "total" , repeatitems: false, id: "0" }, footerrow: true,toolbar:[ true,"top" ],
                shrinkToFit: true, autowidth: true , height: oa.tabHeight-30, rowNum: 9000, // pager: jQuery('#pager_Stat$HtmTemp.MenuID'),rowList: oa.pageList, sortname: 'Role.id', sortorder: "desc",
                colModel: oa.EasyColumns2JQGrid(resp.columns), viewrecords: true, loadonce: true //, caption: "客户交易汇总"
            });
            $( "#toolbar_${HtmTemp.MenuID}" ).prependTo($("#t_grid_Stat${HtmTemp.MenuID}")); $("#toolbar_${HtmTemp.MenuID}" ).show();
        });
 
    $( '#formwinStat${HtmTemp.MenuID}').form({
        onSubmit: function () {
            var r = $(this ).form('validate'); if (r) $("#load_grid_Stat$HtmTemp.MenuID" ).show();return r;
        },
        success: function (data) {
            eval( 'var resp=' + data); jQuery("#grid_Stat$HtmTemp.MenuID" ).jqGrid("clearGridData"); ///清空数据
            jQuery( "#grid_Stat$HtmTemp.MenuID" ).jqGrid('setGridParam', { data: resp.rows }).trigger("reloadGrid" );///更新数据
            jQuery( "#grid_Stat$HtmTemp.MenuID" ).footerData("set", resp.footer[0]); //更新底部统计数据
            $( "#load_grid_Stat$HtmTemp.MenuID" ).hide();
        }
    });
   
    $( "#gridloding_${HtmTemp.MenuID}" ).remove();
</script>
 
备注:
${HtmTemp.MenuID} 是NVelocity中的语法;日期控件 My97DatePicker; JQGrid皮肤与Jquery UI控件通用
 
 
 

 

 

知识文章分类

Jquery

阅读排行