普元 NUI框架使用经验积累

1.两种方式获取数据

  <div id="grid_0" class="nui-datagrid personnel-content" 
    style="width:100%;height:200px;"
    url="请求数据接口"
    dataField="数据源名称"
    pageSize="10"
    showPageInfo="true"
    showPageIndex="true"
    showPager="false"//是否启动分页
    oncellvalidation="onCellValidation"    onLoad = "onLoad">
    <div property="columns">
        <div type="checkcolumn"></div> //复选框实现全选操作
        <div field="ordernumber" vtype="required" allowSort="true" align="center" headerAlign="center">
                            订单编号<font color="red">*</font>
                          <input class="nui-textbox" enabled="true" name="" property="editor" onblur="ONblurs(this)"/>
              </div>
              <div field="ordertime"  dateFormat="yyyy-MM-dd HH:MM:ss" headerAlign="center" allowSort="true" >
            下单时间 
      </div>
    </div>
 </div>

onCellValidation函数是提交前对整个表单进行校验
field="ordernumber" field对应接口中数据的字段名
vtype = "required" 对应项是必填项
dateFormat="yyyy-MM-dd HH:MM:ss" 24小时展示方式
dateFormat="yyyy-MM-dd hh:mm:ss" 12小时展示方式
页面加载完要调用一下
nui.parse();//nui框架进行编译
var grid = nui.get("grid_0");
grid.load();//table进行数据载入
var grid_data = grid.getData();//获取table中全部数据
var grid_data = grid.getSelectData();//获取table中选中的数据
//校验方法
function onCellValidation(e){
if(e.field =="ordernumber"){//自定义校验字段规则
var str=e.value;
if(.trim(str).length>20){
e.errorText="订单编号不能超过20位！";
e.isValid = false;
return false;
}
}
}

function onLoad(){//重加载函数可以对数据进行过滤，修改默认展示样式
var grid = nui.get("grid_0");
var _data = grid.getData();
$.each(_data,function(index,item){
item.invoicenumber = (item.invoicenumber == 'null')?'':item.invoicenumber;

});
grid.doUpdate();

}

2.第二种方式通过逻辑流把数据放在隐藏域中
nui.parse();
grid = nui.get("grid_4");
var json = $id("str1").value;//隐藏域值
if (grid != undefined) {
data2 = nui.decode(json);
grid.setData(data2);//给table赋值
}