普元 NUI框架使用经验积累

1.两种方式获取数据

  

    

        
 //复选框实现全选操作
        

                            订单编号*
                          
              
              

            下单时间 
      
    
 

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)==""){
        e.errorText="订单编号不能为空";
              e.isValid = false;
                    return false;
            }else 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赋值
}

3.限制多选框为单选

var grid = nui.get("grid_1");
var rows=grid.getSelecteds();//选中的所有项
if(rows.length > 1){
  grid.cancelEdit();//取消编辑功能
  grid.clearSelect(true);//清除所有选中项
  layer.alert('请选择一条进行编辑');
  return false;
}

4.设置单选:multiSelect="false" 设置为false

//multiSelect="false"  设置为false

5.常用语法备注

//将页面中html转为nui控件，转完后才能使用nui.get(id) 获取元素
nui.parse()
//获取parent范围内的name为name的控件
nui.getByName(name,parent)
//把js对象序列化为字符串
nui.encode()
//将字符串反序列化为js对象,autoParseDate:布尔值，是否自动解析日期字符串为Date类型
nui.decode(json,autoParseDate)

//表格可以实现分页加载 自定义列 单元格渲染 行编辑器 锁定列 过滤行 汇总行等功能
DataGrid