使用ecside很久了,无论从处理速度还是易用性上来说,ecside都不失为一个成功的简要列表控件。可是有个问题困绕着我很久,那就是自加的checkbox列翻页后无法保存状态的问题。
不知道是没有引起fins 的关注,还是用处较少,网上也很少有人提及。由于项目的需要,这个问题始终不能回避,于是决定动手修改源码。下面是我修改ecside.js源码的内容,主要是添加了部分内容:
Array.prototype.baoremove
=
function
(dx)
//
删除数组中某个元素
... {
if(isNaN(dx)||dx>this.length)...{return false;}
this.splice(dx,1);
} ;
Array.prototype.uniq = function () ... {//删除数组中重复数据
var i = 0, j = 0;
while (undefined !== this[i])...{
j = i + 1;
while(undefined !== this[j])...{
if (this[i] === this[j]) ...{
this.splice(j, 1);
}
++j;
}
++i;
}
return this;
}
ECSideUtil.getPageCheckValue = function (checkboxname) ... {//获取所有的check值
var carray = new Array();
var box = document.getElementsByName(checkboxname);
for(var i=0;i<box.length;i++)...{
if(box[i].checked)...{
carray.push(box[i].value);
}else...{
carray.baoremove(box[i].value);
}
}
var newarray = carray.uniq();
newarray.uniq();//重复过滤,因为一次过滤后发现仍会产生重复数据
return newarray;
} ;
ECSideUtil.initPageCheckValue = function (checkboxname,checkedarry) ... {//翻页保存checkbox状态
var box = document.getElementsByName(checkboxname);
for(var i=0;i<box.length;i++)...{
for(var j=0;j<checkedarry.length;j++)...{
if(checkedarry[j]==box[i].value)...{
box[i].checked=true;
}
}
}
} ;
ECSideUtil.gotoPage = function (pageno,formid) ... {
var allcheckarray =ECSideUtil.getPageCheckValue("yourcheckboxname") ;//获得所有的check值
var ecsideObj=ECSideUtil.getGridObj(formid);
ecsideObj.showWaitingBar();
try...{
ECSideUtil.NearPagesBar.doHideMe();
}catch (e3)...{}
var pageid=ecsideObj.pageFieldName;
var form=ecsideObj.ECForm;
if (!form[pageid])...{
var hiddenpageid=document.createElement("input");
hiddenpageid.id=pageid;
hiddenpageid.style.display="none";
form.appendChild(hiddenpageid);
}
form[pageid].value=pageno;
ECSideUtil.noExport(formid);
form.action=ecsideObj.DEFAULT_ACTION;
try ...{
if (ecsideObj.doPreload)...{
ecsideObj.goPage();
}else ...{
ecsideObj.ajaxSubmit();
}
}catch (e)...{
try ...{
ecsideObj.ajaxSubmit();
}catch (e2)...{
form.submit();
}
}
ECSideUtil.initPageCheckValue("yourcheckboxname",allcheckarray);//初始化本页
} ;
... {
if(isNaN(dx)||dx>this.length)...{return false;}
this.splice(dx,1);
} ;
Array.prototype.uniq = function () ... {//删除数组中重复数据
var i = 0, j = 0;
while (undefined !== this[i])...{
j = i + 1;
while(undefined !== this[j])...{
if (this[i] === this[j]) ...{
this.splice(j, 1);
}
++j;
}
++i;
}
return this;
}
ECSideUtil.getPageCheckValue = function (checkboxname) ... {//获取所有的check值
var carray = new Array();
var box = document.getElementsByName(checkboxname);
for(var i=0;i<box.length;i++)...{
if(box[i].checked)...{
carray.push(box[i].value);
}else...{
carray.baoremove(box[i].value);
}
}
var newarray = carray.uniq();
newarray.uniq();//重复过滤,因为一次过滤后发现仍会产生重复数据
return newarray;
} ;
ECSideUtil.initPageCheckValue = function (checkboxname,checkedarry) ... {//翻页保存checkbox状态
var box = document.getElementsByName(checkboxname);
for(var i=0;i<box.length;i++)...{
for(var j=0;j<checkedarry.length;j++)...{
if(checkedarry[j]==box[i].value)...{
box[i].checked=true;
}
}
}
} ;
ECSideUtil.gotoPage = function (pageno,formid) ... {
var allcheckarray =ECSideUtil.getPageCheckValue("yourcheckboxname") ;//获得所有的check值
var ecsideObj=ECSideUtil.getGridObj(formid);
ecsideObj.showWaitingBar();
try...{
ECSideUtil.NearPagesBar.doHideMe();
}catch (e3)...{}
var pageid=ecsideObj.pageFieldName;
var form=ecsideObj.ECForm;
if (!form[pageid])...{
var hiddenpageid=document.createElement("input");
hiddenpageid.id=pageid;
hiddenpageid.style.display="none";
form.appendChild(hiddenpageid);
}
form[pageid].value=pageno;
ECSideUtil.noExport(formid);
form.action=ecsideObj.DEFAULT_ACTION;
try ...{
if (ecsideObj.doPreload)...{
ecsideObj.goPage();
}else ...{
ecsideObj.ajaxSubmit();
}
}catch (e)...{
try ...{
ecsideObj.ajaxSubmit();
}catch (e2)...{
form.submit();
}
}
ECSideUtil.initPageCheckValue("yourcheckboxname",allcheckarray);//初始化本页
} ;
ECSideUtil.gotoPage 是ecside 源码的翻页函数,本部分代码实现翻页保存checkbox状态的原理就是在调用 ECSideUtil.gotoPage 之前获取所有的checked 状态的checkbox 存入有临时变量(ECSideUtil.getPageCheckValue 方法), 在ECSideUtil.gotoPage 调用之后也即完成翻页后,把临时变量中存取的所有checked 状态checkbox与当前页的checkbox进行比较(ECSideUtil.initPageCheckValue),如当前页checkbox 已经存在该临时变量中,则把当前页checkbox勾选,也即实现了保存状态的功能。
JSP页面不用做任何改变,代码如下:
<
ec:column
cell
="checkbox"
headerCell
="checkbox"
alias ="chkBoxUser" value ="${record.USERID}"
width ="26" viewsAllowed ="html" />
alias ="chkBoxUser" value ="${record.USERID}"
width ="26" viewsAllowed ="html" />
获取所有checked checkbox JS脚本:
var
checkedvalues
=
ECSideUtil.getPageCheckValue(
'
chkBoxUser
'
);
因为没有真正为ECSideUtil.gotoPage添加参数,ECSideUtil.getPageCheckValue()和ECSideUtil.initPageCheckValue()参数只能写死,接收 checkbox name.所以最好所有table 的checkbox用同样的alias.
最后要感谢向左走向右走的辛勤劳动: http://www.blogjava.net/kawaii/archive/2007/09/26/148167.html
欢迎讨论与批评.....