工作ui（2）
做完整个小Demo整理的一些方法和踩过的miniUI的坑，分享出来希望大家批评指正，共同进步。
1、动态创建列：尽量不要直接在html文件里创建列，动态设置在js文件里方面添加、修改等。
首先把列定义在变量中，例：
-
var items=[
-
{field:"id",width:"30",header:"id"},
-
{field:"id",width:"30",header:"id"},
-
...
-
]
-
grid.set({
-
style:"width:800px;"... ,
-
columns:items
-
})
2、将本地数据传入表格：setData函数，将自己模拟的数据传入表格（哈哈，编名字的的技术还不错吧）
-
var arr=[
-
{id:1,name:"王力坤",gender:1,age:28},
-
{id:2,name:"周大宝",gender:1,age:19},
-
{id:3,name:"李小明",gender:0,age:21},
-
....
-
];
-
grid.setData(arr);
3、性别渲染器：存放的数据中，性别一般用1 ，0 来代替 男 、女。这时需要在性别行添加 renderer:"onGenderRenderer"，然后定义函数onGenderRenderer ：
-
var Genders = [{ id: 1, text: '男' }, { id: 0, text: '女'}];
-
function onGenderRenderer(e) {
-
for (var i = 0, l = Genders.length; i < l; i++) {
-
var g = Genders[i];
-
if (g.id == e.value) return g.text;
-
}
-
return "";
-
};
4、用drawcell渲染:age<23的数据行为红色:
-
.red{
-
color:red;
-
}
-
grid.on("drawcell",function(e){
-
var record=e.record;
-
if(record.age<23){
-
e.rowStyle="color:red" ;
-
}
-
});
这里的red为外部定义的样式。
其实我起初想到的另一种方法，就是用mini的findrows方法找到age<23的行，然后用addRowCls给每个符合的行增加样式。但是后来发现一个问题，就是改动别的地方时也要重新写一遍，造成代码重复，所以还是上面的方法比较好。
5、 confirm和mini.confirm：选择删除行数据的时候，会弹出警告框确认是否要删除，有”确定“和”取消“两个按钮。
坑：confirm的时候，点击“确定”按钮会删除；而到了mini.confirm的时候，不管点击哪个按钮都会删除，踩了半天的坑才发现，原来mini.confirm跟alert的功能是一样的，这是一个弹出的警告框。我们要想让它实现confirm的功能，必须把要执行的函数放在它的回调函数中，附上代码：
（1）confirm警告框：
-
if(confirm("确定删除记录？")){
-
if(action=="ok"){
-
grid.removeRows(rows);
-
}
-
}else{
-
mini.alert("请选中一条记录");
-
}
（2）mini.confirm警告框：
-
mini.confirm("确定删除记录？","警告",function(action){//confirm返回Boolean,mini.confirm()返回警告框，必须加回调函数
-
if(action=="ok"){
-
grid.removeRows(rows);
-
}
-
})
-
}else{
-
mini.alert("请选中一条记录");
-
}
6、chrome浏览器下 CloseOwnerWindow 问题：添加完数据的时候，chrome下点击按钮没反应，火狐和ie却可以，这是因为必须把项目部署在服务器上，CloseOwnerWindow函数才能正常执行。
这里附上一个解决办法：解决如何把项目放到服务器运行的问题
7、父页面获取子页面控件值得问题： 子页面用mini表单自带的方法form.getData()获取控件值，父页面在open函数的ondestroy中可以获取到值却显示不出来，这可能有好几个问题：
（1）lz因为比较粗心，function忘记传参，相当于没有判断条件，自然就错掉了，所以大家在找bug的时候一定要仔细看代码的细节。lz当时是这样写的，不堪回首啊~~ 子页面传了action=”ok“父页面却没有写参数.....
-
ondestroy: function (此处是空的...) {
-
if(action=="ok"){
-
var iframe = this.getIFrameEl();
-
var add_data = iframe.contentWindow.GetData();
-
...
-
}
-
}
-
-
而子页面:
-
function closeWindow(action) {
-
if (window.CloseOwnerWindow)
-
return window.CloseOwnerWindow(action);
-
else
-
window.close();
-
}
-
function onOk() {
-
closeWindow("ok");//这里传了个action="ok"
-
}
（2）可能还有一种情况，就是当你把新获取到的数据添加到数组的时候，没有重新setData。要记得setData两次哦，第一次是定义完列的时候传进初始数据，第二次是把新数组的值传进去。
-
ondestroy: function (action) {
-
if(action=="ok"){
-
var iframe = this.getIFrameEl();
-
var add_data = iframe.contentWindow.GetData();
-
$.extend(true,add_data,add_data);//add_data=mini.clone(add_data);
-
arr.push(add_data);
-
//这里要注意，一定要再传一次更新后的数组
-
grid.setData(arr);
-
}
-
}
-
})
8、mini.clone：mini在获取到数据一定要克隆数据mini.clone才可以使用，这里用jQuery的深拷贝也可以实现。
大家可以自己试一下哦 : js的几种拷贝方法
9、控件只读：子页面id不可编辑，只需要把控制设置为只读就可以了哦。
-
function SetData(data){
-
var fields = form.getFields(); //获取控件
-
var c=fields[0]; //id的控件
-
if(data.action="edit"){
-
data=$.extend(true,data,data);
-
if(c.setReadOnly){ //设置控件只读
-
c.setReadOnly(true);
-
}
-
form.setData(data.edit_item);
-
}
-
}
10、电话号码校验：在控件中validation属性校验
-
<input id="phoneNumber" name="phoneNumber" class="mini-textbox" onvalidation="onIsPhonenumberAllow" required="true"/>
-
-
-
function onIsPhonenumberAllow(e) {
-
var reg= /^1[34578]\d{9}$/;
-
if (e.isValid) {
-
if (reg.test(e.value) == false) {
-
e.errorText = "请输入正确的手机号码!";
-
e.isValid = false;
-
}
-
}
-
}
