easy-ui的data-options用法

原文地址：http://www.cnblogs.com/missmz/p/6509860.html

页面代码部分：

<thead> 
<tr> 
<th data-options="field:'a',width:60">停车时刻</th> 
<th data-options="field:'nMin',width:50">时长</th> 
<th data-options="field:'poi',width:80,">地点</th> 
</tr>
</thead>

在easy-ui里面，data-options可以轻松定义列表的属性，这里field:'a'声明一个数据名称，该数据名和api接口里一致；

在js中datagrid作为easy-ui的数据表格控件，可以通过idFiled属性获得页面的标识字段，从而对页面的数据进行操作。

对应的js 部分

//datagrid初始化
function datagrid_init() {
window.dg = $('#dg').datagrid({
idField: 'a',//识别页面的标识字段
header: '#hh',//表头id
singleSelect: true,//单行选择
border: false,//边框线
remoteSort: true,//定义从服务器对数据进行排序
pageSize: 10,//页码数
pagination: true,//分页
fit: true,
fitColumns: true,//自动列宽
scrollbarSize: 0,//滚动条的宽度
onDblClickRow: function (rowIndex, rowData) {//用户双击一行时触发 rowIndex：点击的行的索引值，该索引值从0开始。

//rowData：对应于点击行的记录。

//alert(rowData.lng);
var msg = "时间：" + rowData.a + "<br>里程：" + rowData.mileage + "<br>行驶时间：" + rowData.nMin;
refresh(rowData.lng, rowData.lat, msg, rowData.a)
$.mobile.go('#p3');
}

});
window.pg = $('#dg').datagrid('getPager');
$('.datagrid-pager').pagination({
onSelectPage: function (pageNumber, pageSize) {
$(this).pagination('loading');
//alert('pageNumber:' + pageNumber + ',pageSize:' + pageSize); 
qry_pos();
$(this).pagination('loaded');
}
});
}