基於easyui fom分組外掛

浪花一朵朵發表於2014-04-27
UI

本外掛適用於表單按屬性分組，可以動態設定顯示的列數，每一個表單寬度，表單型別，以及對齊。不同panel之間的表單也是對齊的。

效果：

依賴：jquery ,easyui,

實現過程：整個控制元件一個panel組成，panel頭部放標題及圖示，內容放表單，根據傳入的引數，有幾個組就建立幾個panel，panel裡面的內容就是一表格，根據傳入的列數來建立列，如果傳入資料的長度除以列數可以整除，那麼行數就等於這個數，如果還有餘數，就等於這個數+1，當然如果顯示的傳入陣列長度小於列數，那麼就顯示一行了。

 function createGrid(container, para, id, colNum) {
        var table = $("<table  id=\"g" + id + "\" >");
        var wd=1200/colNum-120;
        table.appendTo($(container));
        if (colNum > para.length) {
            wd=1200/para.length-120;
             createRows(para,table,wd);
        }
        else {
            var formArray = new Array();
            var tr = undefined;
            for (var i = 0; i < para.length; i++) {
                if (i % colNum == 0 && i != 0) {
                       createRows(formArray,table,wd);
                    formArray.length = 0;
                }
                formArray.push(para[i]);
            }
            if (formArray.length > 0) {
                wd=1200/para.length-120;
                createRows(formArray,table,wd);
            }
        }
        $(container).append("</table>");
    }

建立panel，

 function createPanel(container, groupname, id) {
        var icon = 'layout-button-down';
        var p = $('<div></div>').appendTo($(container)).panel({
            cls: 'easyui-panel',
            title: groupname,
            closed: false,
            width: $(container).width(),
            iconCls: 'icon-save',
            doSize: false,
            tools: [{
                iconCls: icon,
                handler: function () {
                    $('#g' + id).toggle("slow");
                }
            }]
        });
        return p;
    }

外掛還沒有提供擴充套件方法，還需要完善。

下載

 

相關文章