MiniUI增刪改查操作及確認按鈕

原文：https://blog.csdn.net/codezdx/article/details/81565043

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