好長時間都沒有寫博客了,今天終於把項目搞的差不多了,抽點時間來把我的筆記寫完吧
在使用flexigrid的時間,大家都可能會遇到一個相同的問題:flexigrid的初始化實在有點麻煩,而且代碼感覺有些雜亂.花了一天的時間,對其進行了改造,使得fexigrid可以像使用dhtmlxgrid一樣的進行初始化,減少了代碼的傳輸量.下面是改造後的flexigrid初始化代碼
<script type="text/javascript">
$(document).ready(function(){
var a=new creater("grid","Listclient.action","post","json","id","desc","true","客戶信息","true","902","200");
//這裏傳送一些初始化信息
a.setHeadName("選擇","客戶姓名","客戶地址","客戶電話","客戶性別","身份證號","手機號","創建時間");
//定義表頭
a.setName("select","clientName","clientAddr","clientHtel","clientSex","clientCertificate","clientTel","createTime");
//定義表頭name值
a.setWidth("30","180","180","100","100","100","100","100");
//定義表格寬度
a.setSortable(true,true,false,false,false,false,false,false);
//是否排序
a.setShowable(false,false,false,false,false,false,false,false);
//是否顯示
a.setAlign("center","center","center","center","center","center","center","center");
//對齊方式
a.setButtonName("查看","增加","刪除","修改");
//安鈕
a.setBclass("userBt","userBt","userBt","userBt");
a.setOnpress("operate","operate","operate","operate")
//安鈕點擊後打開的頁面
a.setAdd("clientadd.jsp","600","400");
a.setUpdate("clientupdate.jsp","600","400");
a.setDetail("clientdetail.jsp","600","400");
a.showtable();//創建表格
});
</script>
下面是改造後的js處理
/**改造的flexigrid的構造方式
*/
//這些數組主要用來存入colModel裏面的數據
var headName=new Array();//用於存放表頭信息
var name=new Array();//用於存放表頭的字段名
var width=new Array();//用於存放表頭的寬度
var showable=new Array();//用於存放是否顯示字段信息
var sortable=new Array();//用於存放表頭是否排序
var align=new Array();//用來存放是對齊方式
var buttonName=new Array();//用來存放安鈕的名字
var bclass=new Array();//用來存放安鈕的樣式
var onpress=new Array();//用來存入安鈕事件的名字
var table="[";
var button="[";
var addwd;
var addul;
var addht;
var updateul;
var updateht;
var updatewd;
var findul;
var findwd;
var findht;
var tab;
function creater(div,url,method,dataType,sortName,sortorder,usepager,title,useRp,width,height){
this.div=div;
tab=div;
this.url=url;
this.method=method;
this.dataType=dataType;
this.sortName=sortName;
this.sortorder=sortorder;
this.usepager=usepager;
this.title=title;
this.useRp=useRp;
this.height=height; //default height
this.width=width;
}
creater.prototype.setHeadName=function(){//取得表頭的名字
for(var i=0;i<arguments.length;i++){
headName[i]=arguments[i]
}
}
creater.prototype.setName=function(){//取得字段名
for(var i=0;i<arguments.length;i++){
name[i]=arguments[i]
}
}
creater.prototype.setWidth=function(){//取得寬度
for(var i=0;i<arguments.length;i++){
width[i]=arguments[i]
}
}
creater.prototype.setSortable=function(){//是否排序
for(var i=0;i<arguments.length;i++){
sortable[i]=arguments[i]
}
}
creater.prototype.setShowable=function(){//是否顯示
for(var i=0;i<arguments.length;i++){
showable[i]=arguments[i]
}
}
creater.prototype.setAlign=function(){//取得對齊方式
for(var i=0;i<arguments.length;i++){
align[i]=arguments[i]
}
}
creater.prototype.setButtonName=function(){//取得安鈕的名字
for(var i=0;i<arguments.length;i++){
buttonName[i]=arguments[i]
}
}
creater.prototype.setBclass=function(){//取得安鈕的樣式
for(var i=0;i<arguments.length;i++){
bclass[i]=arguments[i]
}
}
creater.prototype.setOnpress=function(){//取得安鈕對應的樣式
for(var i=0;i<arguments.length;i++){
onpress[i]=arguments[i]
}
}
creater.prototype.setAdd=function(url,width,height){//打開一個增加的新窗口
addul=url;
addwd=width;
addht=height;
}
creater.prototype.setUpdate=function(url,width,height){//打開一個修改窗口
updateul=url;
updatewd=width;
updateht=height;
}
creater.prototype.setDetail=function(url,width,height){//打開一個新窗口
findul=url;
findwd=width;
findht=height;
}
creater.prototype.showtable=function(){//根據上面的信息創建表格
if(headName.length==name.length&&width.length==align.length&&name.length==showable.length&&name.length==align.length){
for(var i=0;i<headName.length;i++){
if(i==headName.length-1){
table+="{display: '"+headName[i]+"', name: '"+name[i]+"', width:'"+ width[i]+"', sortable:"+sortable[i]+" , align:'"+ align[i]+"',hide:"+showable[i]+"}";
}else{
table+="{display: '"+headName[i]+"', name: '"+name[i]+"', width:'"+ width[i]+"', sortable:"+showable[i]+" , align:'"+ align[i]+"',hide:"+showable[i]+"},";
}
}
table+="]";
if(buttonName.length!=0&&buttonName.length==bclass.length&&bclass.length==onpress.length){
for(var i=0;i<buttonName.length;i++){
button+="{name: '"+buttonName[i]+"', bclass:'"+bclass[i]+"', onpress :"+ onpress[i]+"},";
}
button+="{separator: true}]" ;
}
$("#"+this.div).flexigrid({
url:this.url,
width:this.width,
height:this.height,
dataType: this.dataType,
colModel : eval(table),
sortname: eval(this.sortname),
sortorder: this.sortorder,
usepager: eval(this.usepager),
buttons:eval(button),
title:this.title,
useRp:eval(this.useRp),
rp: 10,
showTableToggleBtn: true,
procmsg: '正在加載數據,請稍等...'
});
}else{
alert("表格定義有誤,請檢查");
}
}
//下面的處理方法可根據自己的業務需求重新定義
function operate(com,grid) //安鈕事件
{
if(com=='刪除'){
if(selectTrAll()<=0){
alert("請選擇你要刪除的數據");
return;
}
if(selectTrAll()>0){
if(confirm("你真的要刪除"+selectTrAll()+"條記錄嗎?")){
//alert(getAllid());
var datastr;
datastr="delId="+getAllid();
$.ajax({url:document.getElementById("delurl").value,
type:'post',
data:datastr,
dataType:'json',
timeout:1000,
error:function(data) {
alert(data.message);
},
success:function(data) {
alert("刪除成功");
$("#"+tab).flexReload();//刷新表格
}
})
}
}
}
if(com=="增加"){
showadd();//
return;
}
if(com=="修改"){
if(selectTrAll()<=0){
alert("請選擇要修改的數據");
return;
}
if(selectTrAll()>1){
alert("修改只能選擇一條數據,請重新選擇");
return;
}
updateopen();
}
}
function showadd(){//打開一個新窗口
$.funkyUI({
url:addul,
OKEvent:okEvent,
css:{width:addwd,height:addht}
});
}
function updateopen(){//打開一個新窗口
$.funkyUI({
url:updateul,
OKEvent:okEvent,
css:{width:updatewd,height:updateht}
});
}
function detailopen(){//打開一個新窗口
$.funkyUI({
url:findul,
OKEvent:okEvent,
css:{width:findwd,height:findht}
});
}
function updateInput(){//打開一個新窗口
var datastr;
if(document.getElementById("beanName").value!=""){
datastr=document.getElementById("beanName").value+".ufId="+getpId();
}else{
datastr="ufId="+getpId();
}
// alert(datastr);
$.ajax({
url:document.getElementById("updateurl").value,
type:'post',
data:datastr,
dataType:'json',
timeout:1000,
error:function(data) {
alert(data.message);
},
success:function(data) {
/**
這一段代碼可以得到子窗口的window對象
var win=document.getElementsByTagName("iframe")[0].id;
alert(win);
var inp=window.frames[win].document.getElementById("form");
//var inp=$(window.frames[win].document).find(":input");
alert(inp[0].id);
*/
//這裏要求後臺傳來的數據順序和前臺rform表單對應,不然會出錯.
var inp=document.getElementById("form");
for(var i=0;i<inp.length-2;i++){
inp[i].value=data.updateData[i];
if(inp[i].id=="unit"){
doOrgChg(inp[i]);
}
if(inp[i].id=="org"){
if(data.updateData[i]!=0){
doOreEmp(inp[i]);
}
}
}
}
});
}
function detail(){
var datastr;
// alert(document.getElementById("detailurl").value);
if(document.getElementById("beanName").value!=""){
datastr=document.getElementById("beanName").value+".ufId="+getpId();
}else{
datastr="ufId="+getpId();
}
$.ajax({
url:document.getElementById("detailurl").value,
type:'post',
data:datastr,
dataType:'json',
timeout:1000,
error:function(data) {
alert(data.message);
},
success:function(data) {
/**
這一段代碼可以得到子窗口的window對象
var win=document.getElementsByTagName("iframe")[0].id;
alert(win);
var inp=window.frames[win].document.getElementById("form");
//var inp=$(window.frames[win].document).find(":input");
alert(inp[0].id);
*/
var tab=document.getElementsByTagName("table");
//alert(tab[0].rows.length);
var row=tab[0].rows;
// alert(row.item(0).cells.length);
var jj=0
for(var i=0;i<row.length;i++){
var cell=row.item(i).cells;
for(var j=1;j<cell.length;j+=2){
if(data.updateData[jj]!=undefined&&data.updateData[jj]!="undefined"){
cell[j].innerText=data.updateData[jj];
}
jj++;
}
}
}
});
}
//checkbox的選中與取消事件
function selectTr(e){
var clazz=document.getElementById("row"+e);
if(document.getElementById(e).checked!=true){
clazz.className="";
}else{
clazz.className="trSelected";
}
}
//得到選中行的某列數據
function selectTrtext(cell){
return $('.trSelected',grid)[0].cells[cell].innerText;
}
function selectTrAll(){
return $('.trSelected',grid).length;
}
function getId(){
return $('.trSelected',grid)[0].id.substring(3);
}
function getpId(){
return $(window.parent.document).find('.trSelected',$('gird', window.parent.document)
)[0].id.substring(3);;
}
function getAllid(){
var idstr="";
var allTr=$('.trSelected',grid);
for(var i=0;i<allTr.length;i++){
idstr+=allTr[i].id.substring(3)+",";
}
return idstr;
}
function getFormAndFormWrite(form,data){
var form=document.getElementById(form);
/**這一段可用來遍列整個json對象裏面的元素,現在用不上了,不刪除留等
var data=new Array();
var j_ii=0;
for (var one in data)
{
for(var key in data[one])
{
data[j_ii]=data[one][key];
alert(data[j_ii]);
j_ii++;
}
}
*/
for(var i=0;i<form.length-btcount;i++){
form[i].value=date[i];
}
}
通過這樣改造後,可以減少flexigerid初始化的代碼,而且簡單明瞭.如果有看不董的地方請留言.另外說是且點,我在很多網站轉載了我寫的文章,麻煩轉載時請註明作者.鄧長鬆