- gridAPI
----------------------1.1 手动创建表格--------------------
- Grid属性API、 Grid列属性API、 Grid生命周期API。
要用的属性都在html创建表格时写上。
如下：
Grid属性、Grid生命周期 写在u-meta里， Grid列属性创建列时写在options里。
//Grid属性API //Grid生命周期API eg: onRowFocus
<div id="attachGrid" class="new-add-grid-style" style="height:42%;"
u-meta='{"id":"attachgrid","type":"grid","data":"filesDataTable",
"showNumCol":"false",
"columnMenu":false,
"canDrag":true,
"sortable":false,
"canSwap":true,
"multiSelect": true,
"columnMenu":true,
"editable":true,
"cancelFocus":false,
"cancelSelect":false,
"headerHeight":32,
"rowHeight":32 ,
"showNumCol": true,
"showSumRow": false,
"sumRowFirst":true,
"onRowFocus":"onRowFocus",
"onBeforeValueChange":"onBeforeValueChange"}'>
//Grid列属性API
<div options='{"field":"fileName",
"dataType":"String","title":"文件名称",
"width":"200",
"renderType":"",
"editType":""}'>
</div>
<div options='{"field":"fileType",
"dataType":"String",
"title":"文件类型" ,"width":"80",
"renderType":"",
"editType":""}'>
</div>
</div>
- js
var viewModel = {
filesDataTable: new u.DataTable({
meta : {
"fileName" : {
type : 'string'
},//文件名称
"fileType" : {
type : 'string'
}//文件类型
}
}),
}
- Grid方法API
1.方法一：
通过生命周期方法参数获取并保存gridObj。通过gridObj使用grid方法。
//Grid方法API
var gridObj = {};
onRowFocus = function(obj){
gridObj = obj.gridObj
}
gridObj.getAllRows();
2.方法二（推荐）：
//视图id = attachgrid（在u-meta中定义了id）
var gridObj = $('#attachgrid' ).parent()[0]['u-meta'].grid;
//setRenderType 设置渲染方法
gridObj .getAllRows();
- u.js? 赋值等 setSimpleData
viewModel.filesDataTable.setSimpleData(data);
var filesData = viewModel.filesDataTable.getSimpleData({type:"select"});
var delchrIds = vm.accountBookDataTable.getSimpleData({
type : 'select',
fields:['chrId']
});
---------------------2.2 视图创建表格-------------------
- 初始化表格
viewModel.initData = function() {
for ( var n = 0; n < viewModel.viewList.length; n++) {
var view = viewModel.viewList[n];
if (view.viewtype == PeConstant.ViewType.VIEWTYPE_LIST) {// 列表视图
if (view.orders == '1') {
viewModel.gridViewid_fileList = view.viewid;
viewModel.tableViewDetail_fileList = view;
}
}else if (view.viewtype == PeConstant.ViewType.VIEWTYPE_QUERY) {// 查询视图
}
}
//初始化主页面未审核、已审核列表
viewModel.gridViewModel_fileList = ip.createGrid(viewModel.gridViewid_fileList, 'fileListGrid',"", options, 0, false, false, false, false);
};
-
Grid属性API
-
Grid列属性API
-
Grid生命周期API
生命周期方法在创建视图时自动生成，方法名称是表名+下划线+事件（onXxxx），直接使用。具体可调试查看生成的表格。
fileListGrid_onRowSelectedFun = function(){}
fileListGrid_onRowUnSelectedFun = function(){}
fileListGrid_onDbClick = function(){}
fileListGrid_onRowSelected = function(){}
image.png
- Grid方法API
//viewModel.gridViewid 视图id
var gridObj = $('#' + viewModel.gridViewid_fileList.substring(1, 37) + '').parent()[0]['u-meta'].grid;
//setRenderType 设置渲染方法
gridObj .setRenderType("fileName",viewModel.attachRenderType);
viewModel.attachRenderType= function(obj){
if(obj.value && "1" == obj.value){
obj.element.innerHTML = "<input type='checkbox' value='1' checked='checked'/>";
}else{
obj.element.innerHTML = "<input type='checkbox' value='1'/>";
}
}
- u.js? 赋值等 setSimpleData
//分步
var gridObj = $('#' + viewModel.gridViewid_fileList.substring(1, 37) + '').parent()[0]['u-meta'].grid;
var fileListDataTable= gridObj .dataTable;
fileListDataTable.setSimpleData(data);
//简写
var fileListDataTable = $('#' + viewModel.gridViewid_fileList.substring(1, 37) + '').parent()[0]['u-meta'].grid.dataTable;
var ids = viewModel.gridViewModel_fileList.gridData.getSimpleData({
type : 'select',
fields:['chrId']//其他都是CHR_ID
});
网友评论