easyui多个datagrid同步滚动实现
功能描述：同一个页面上有多个datagrid，拖动其中一个datagrid的滚动条时，其他datagrid也同时滚动和当前datagrid一样的滚动距离。
实现方法：easyui datagrid出现滚动条的容器为一个div，样式为datagrid-body，所以只需要获取这个容器，设置容器的scrollLeft和scrollTop即可实现滚动联动设置。
注意：表头也有div为datagrid-body的div，需要过滤掉，而只获取数据容器的datagrid-body。
easyui测试版本为1.3.4，其他版如果运行没有效果，自己看下是否内容容器的样式是否修改过了。
源代码如下
<table class="easyui-datagrid" title="datagrid双向滚动控制" style="width:400px;height:150px"
data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
<table class="easyui-datagrid" title="datagrid双向滚动控制" style="width:400px;height:150px"
data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
<script>
$(function () {
var contents = $('div.datagrid-body:odd'), o;
contents.scroll(function () {
contents.not(this).prop({ scrollLeft: this.scrollLeft, scrollTop: this.scrollTop });
});
});
</script>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：easyui多个datagrid同步滚动实现