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