easyUI datagrid避免二次渲染

easyui datagrid加载数据只有两种方式：一种是ajax加载目标url返回的json数据；另一种是加载js对象，也就是使用loadDate方法。

url方式加载数据

调用方式

目前可能大多数人都是选择这种方式，因为跟流行的框架结合的也比较好，使用url的话，可以将url写在DOM里面或者申明datagrid对象的url属性，以下两种方式都是可以的：

1. <table id="tt" style="width:700px;height:auto" title="DataGrid" idField="itemid" url="datagrid_data2.json">  

1. $('#test').datagrid({   
2.     url:'datagrid_data2.json'   
3. });  

相关方法

loadparam加载第一页数据，param将代替默认查询参数，注意的是该方法只适用于url方式.reloadparam刷新当前页数据，与load方法不同的时候reload方法刷新当前页数据，而load方法会跳到第一页然后刷新.optionsnull获取datagrid实例的各项参数值，常用的参数有url,pageNumber,pageSize这三个参数在请求数据以及分页功能中起重要作用.

二次加载问题

对于使用url方式的初学者，经常碰到重复请求的问题，这个问题的根源是因为一旦设置了url参数，Datagrid组件在实例化的时候就会做请求，如何避免二次加载这样问题呢，个人觉得注意以下两点基本就可以防止二次加载了。

• 使用load和reload函数去动态加载数据，而不是选择再次渲染组件，而再次渲染组件的目的仅仅是为了设置url，这得不偿失，url的设置可以通过options方法获取到组件实例的opts，然后在给opts.url重新赋值即可；
• 用class方式注册组件，一般只将属性写在DOM里，而事件通常还是用javascipt调用datagrid构造函数注册，这个过程中就发生了二次请求：第一次是class方式实例化的时候，第二次是javascript注册事件的时候。所以在要绑定事件的情况下，索性就不要使用class方式注册了。

以上说明参考：http://www.easyui.info/archives/204.html

以下为参考说明所做的实验：

<table id="BaselineListTab" title="您的位置 >> 检查管理>>xxx管理" width="auto" height="auto" iconCls="icon-edit"  data-options="toolbar:'#tb'" idField="id" fitColumns="true" pagination="true">

在table中去掉class 属性；数据加载交由js解决

$('#BaselineListTab').datagrid({rownumbers:true,singleSelect:false,url:'BaselinelistTask.action'});

测试使用js加载数据比之前能快0.1秒(ie8下，估计ie6效果会更明显)，存在二次渲染的情况下时间：

js加载方式: