基于easyui fom分组插件
生活随笔
收集整理的這篇文章主要介紹了
基于easyui fom分组插件
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
本插件適用于表單按屬性分組，可以動態(tài)設(shè)置顯示的列數(shù)，每一個表單寬度，表單類型，以及對齊。不同panel之間的表單也是對齊的。
效果：
依賴：jquery ,easyui,
實(shí)現(xiàn)過程：整個控件一個panel組成，panel頭部放標(biāo)題及圖標(biāo)，內(nèi)容放表單，根據(jù)傳入的參數(shù)，有幾個組就創(chuàng)建幾個panel，panel里面的內(nèi)容就是一表格，根據(jù)傳入的列數(shù)來創(chuàng)建列，如果傳入數(shù)據(jù)的長度除以列數(shù)可以整除，那么行數(shù)就等于這個數(shù)，如果還有余數(shù)，就等于這個數(shù)+1，當(dāng)然如果顯示的傳入數(shù)組長度小于列數(shù)，那么就顯示一行了。
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>");
}
創(chuàng)建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;
}
插件還沒有提供擴(kuò)展方法，還需要完善。
下載
總結(jié)
以上是生活随笔為你收集整理的基于easyui fom分组插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 养殖场水质检测项目水质检测报告
- 下一篇： 土壤水分监测仪：实时的测量和监测土壤水分