ip.js 表格控制-API属性设置

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>

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
                            });

ip.js 表格控制-API属性设置

推荐阅读更多精彩内容