easy-ui的data-options用法
页面代码部分:
<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'); } }); }