miniUI的增删查改操作心得及踩坑总结(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;
                 }
            }
    }

 好啦差不多就是这些了,欢迎初学者跟我一起交流学习哦~

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值