您的位置:首页 > 产品设计 > UI/UE

easy-ui的data-options用法

2018-03-04 14:53 609 查看
原文地址: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');
}
});
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: