基于easyui fom分组插件
生活随笔
收集整理的這篇文章主要介紹了
基于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;
}
插件還沒有提供擴展方法，還需要完善。
下載
總結
以上是生活随笔為你收集整理的基于easyui fom分组插件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 养殖场水质检测项目水质检测报告
- 下一篇： 土壤水分监测仪：实时的测量和监测土壤水分