struts2+spring+hibernate+json+jquery+flexigrid开发笔记-flexigrid改造
好长时间都没有写博客了,今天终于把项目搞的差不多了,抽点时间来把我的笔记写完吧
在使用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初始化的代码,而且简单明了.如果有看不董的地方请留言.另外说是且点,我在很多网站转载了我写的文章,麻烦转载时请注明作者.邓长松