基于easyui fom分组插件

本插件适用于表单按属性分组，可以动态设置显示的列数，每一个表单宽度，表单类型，以及对齐。不同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;
    }

插件还没有提供扩展方法，还需要完善。

下载