BinderHelper
<td style="text-align: center;" bind="{fieldName:'$.UserTypeName', attribute: 'innerText'}"></td>
<td style="text-align: center;" bind="{fieldName:'$.WebSiteUrlDisplay', attribute:'innerHtml'}"></td>
- 排序
<td sort="ImageSize">sort为排序字段
- 1.1 Array 扩展方法
Array.prototype.indexOf(value) 查找指定对象在数组中的索引位置
value： (object) 要在数组中查找的对象
例如： var array = [1, 3, 5, 7]; var index = array.indexOf(3);
Array.prototype.sortBy(sortType, fieldName) 按数组中对象的某个字段对数组进行排序
value： ("asc" | "desc") 指定升序还是降序排列
fieldName： (string) 排序对象的属性名
例如： var array = [{ id: 1, name: "a" }, { id: 2, name: "b" }]; array.sortBy("desc", "id");
Array.prototype.searchBy(fieldName, fieldValue) 在数组中查找某个属性为特定值的对象
fieldName： (string) 查找的属性名
fieldValue： (object) 查找的属性名对应的值
例如： var array = [{ id: 1, name: "a" }, { id: 2, name: "b" }]; var item = array.searchtBy("id", 2);
- 1.2 utility function
Oversea.Utility.toJSON(object) 将数据对象转换成 JSON 字符串
object： (object) 要进行转换的数据对象
例如： var person = { id: 1, name: "tom", age: 25 }; var jsonString = Oversea.Utility.toJSON(person);
Oversea.Utility.clone(value) 克隆对象（深克隆）
value： (object) 要进行克隆的数据对象
例如： var person = { id: 1, name: "tom", age: 25 }; var tom = Oversea.Utility.clone(person);
- 2.1 grid 控件
$.grid(elem, [options]) 或 $.fn.grid([options])
elems： (jquery object) 源对象；
options： (json object) 参数，可能的包括：
gridIndentiry：(string) Grid 的配置标识，用于作为保存配置数据的唯一标识；
dataRowIndex：(number) 用于记录 HTML 模板中第几行作为数据模板行；
dataKey：(string) 用于存储自动生成数据源主键的列名；
innerWidth：(string) 内部Table实际宽度；
outerWidth：(string) Table外层滚动条容器宽度；
showTooltip：(boolean) 是否自动为每个单元格创建提示信息；
showEmptyMsg：(boolean) 不绑定数据为空时，是否显示“没有数据”提示行；
showTopFooter：(boolean) 是否显示Table顶部的页脚信息；
showBottomFooter：(boolean) 是否显示Table底部的页脚信息；
showColumnsArea：(boolean) 是否显示“选择显示列”的区域；
columnsHided：(array) 要隐藏列的索引数组；
columnsFixed：(array) 始终显示列的索引数组；
pagingNumber：(number) 页脚显示分页数字的数量；
isClientPaging：(boolean) 是否是客户端数据分页；
css_row_header：(string) 表头行样式；
css_row_odd：(string) 奇数数据行样式；
css_row_even：(string) 偶数数据行样式；
css_row_hover：(string) 鼠标悬浮行样式；
css_row_selected：(string) 被选中行样式；
css_row_empty：(string) 无数据提示行样式；
getDataSourceHandler：(function) 获取数据源处理函数；
createDataRowsHandler：(function) 创建数据行处理函数；
saveColumnsHandler：(function) 保存“要隐藏列数据”处理函数；
onPaging：(function) 分页显示回调函数；
onSorting：(function) 排序显示回调函数；
onRowBind：(function) 绑定数据行回调函数；
onRowGetData：(function) 获取行数据函数；
onRowCompleted：(function) 绑定数据行完成回调函数；
onCompleted：(function) Grid 生成完成的回调函数；
onDblClickRow：(function) 双击数据行的回调函数；
内部对象：
wrapper：最外层容器对象；
container： Table 外层容器，会自动出现滚动条；
elem：原始源对象；
dataSource：数据源；
dataKey_maxValue：数据源标识字段种子值；
selectedRowKey：当前被选中行的数据源标识字段值；
dataRow_template：数据行的原始模板行；
dataRow_cellsCount：模板行的列数；
dataRows：数据行对象；
columnsArea：”选择显示列”区域对象；
columnsInfo：列信息；
header：表头对象；
footer：页脚对象；
query：查询条件；
pagingInfo：分页信息；
公共方法：
initialize(elem, [options])：初始化 Grid 控件；(参数定义同 $.grid() 的参数)
elems： (jquery object) 源对象；
options：(json object) 初始化参数；
bind([data])：绑定数据到 Grid 控件；如果不传 data 参数，则会自动调用getDataSourceHandler 处理函数来获取数据；
data： (jquery object) 数据源；
render ()：重新生成 Grid 控件；
clear ([isClearData])：清除 Grid 控件；
isClearData： (boolean) 是否清除源数据；
selectRow (row)：选中Grid 的一行；
row： (jquery object | number) 要选中的行的 jquery 对象或数据行的索引；
getRowData ([row])：获取 Grid 行的数据；如果不传参数则获取当前选中行的数据；
row：(jquery object | number) 要获取数据行的 jquery 对象或数据行的索引；
insertRow (data, [index])：插入一条数据到 Grid 中；
data：(json object) 要插入行的源数据；
index：(number) 将行插入到指定的索引位置；
updateRow (data, [row])：更新 Grid 数据行；
data： (json object) 要更新的数据源；
row： (jquery object) 要更新的数据行对象；
deleteRow (data)：删除 Grid 数据行；
data： (json object) 要删除的数据源；
paging (index)：分页函数；
index： (number) 要显示的页数；
sorting (sortBy)：排序函数；
sortBy： (string) 排序条件；
例如:
HTML:
<table id="gridTest3" style="width: 100%;" class="newGrid" >
<tr class="header">
<td width="25%">column1</td>
<td width="25%">column2</td>
<td width="25%">column3</td>
<td width="25%">column4</td>
</tr>
<tr>
<td bind="{fieldName:'$.Column1',attribute:'innerText'}">1</td>
<td bind="{fieldName:'$.Column2',attribute:'innerText'}">1</td>
<td bind="{fieldName:'$.Column3',attribute:'innerText'}">1</td>
<td bind="{fieldName:'$.Column4',attribute:'innerText'}">1</td>
</tr>
</table>
Javascript:
var control = $("#gridTest3").control({
gridIndentity: "gridTest3", //配置用户自定义显示列的唯一标示
isClientPaging: false, //是否开始客户端分页
showBottomFooter: true, //禁止底部页脚显示
onDblClickRow: function(sender, e) {
alert(
"Column1:" + e.data["Column1"] + "\r\n" +
"Column2:" + e.data["Column2"] + "\r\n" +
"Column3:" + e.data["Column3"] + "\r\n" +
"Column4:" + e.data["Column4"]
);
},
getDataSourceHandler = function(sender, e) {
Default.Paging(e.PagingInfo, function(result, context) {
if (result.error) {
alert(result.error.Message);
return;
}
sender.pagingInfo.totalCount = result.value.PagingInfo.TotalCount;
sender.bind(result.value.ResultList);
});
}
});
control.bind();