- 浏览: 750276 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
梦行Monxin商城系统:
java网上商城与php网上商城比较 -
梦行Monxin商城系统:
java网上商城与php网上商城比较 -
任楚娴:
你好,请问html = nvl(html); 这句中的nvl( ...
java html串转换成文本串 -
u013246812:
,谢拉!
jQuery ui Dialog 讲解参数 -
大宝剑99:
...
前端优化
//1.判断select选项中 是否存在Value="paraValue"的Item
function jsSelectIsExitItem(objSelect,objItemValue)
{
var isExit = false;
for(var i=0;i<objSelect.options.length;i++)
{
if(objSelect.options[i].value == objItemValue)
{
isExit = true;
break;
}
}
return isExit;
}
//2.向select选项中 加入一个Item
function jsAddItemToSelect(objSelect,objItemText,objItemValue)
{
//判断是否存在
if(jsSelectIsExitItem(objSelect,objItemValue))
{
alert("该Item的Value值已经存在");
}
else
{
var varItem = new Option(objItemText,objItemValue);
// objSelect.options[objSelect.options.length] = varItem;
objSelect.options.add(varItem);
alert("成功加入");
}
}
//3.从select选项中 删除一个Item
function jsRemoveItemFromSelect(objSelect,objItemValue)
{
//判断是否存在
if(jsSelectIsExitItem(objSelect,objItemValue))
{
for(var i=0;i<objSelect.options.length;i++)
{
if(objSelect.options[i].value == objItemValue)
{
objSelect.options.remove(i);
break;
}
}
alert("成功删除");
}
else
{
alert("该select中 不存在该项");
}
}
//4.修改select选项中 value="paraValue"的text为"paraText"
function jsUpdateItemToSelect(objSelect,objItemText,objItemValue)
{
//判断是否存在
if(jsSelectIsExitItem(objSelect,objItemValue))
{
for(var i=0;i<objSelect.options.length;i++)
{
if(objSelect.options[i].value == objItemValue)
{
objSelect.options[i].text = objItemText;
break;
}
}
alert("成功修改");
}
else
{
alert("该select中 不存在该项");
}
}
//5.设置select中text="paraText"的第一个Item为选中
function jsSelectItemByValue(objSelect,objItemText)
{
//判断是否存在
var isExit = false;
for(var i=0;i<objSelect.options.length;i++)
{
if(objSelect.options[i].text == objItemText)
{
objSelect.options[i].selected = true;
isExit = true;
break;
}
}
//Show出结果
if(isExit)
{
alert("成功选中");
}
else
{
alert("该select中 不存在该项");
}
}
//6.设置select中value="paraValue"的Item为选中
//document.all.objSelect.value = objItemValue;
//7.得到select的当前选中项的value
//var currSelectValue = document.all.objSelect.value;
//8.得到select的当前选中项的text
//var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
//9.得到select的当前选中项的Index
//var currSelectIndex = document.all.objSelect.selectedIndex;
//10.清空select的项
// document.all.objSelect.options.length = 0;
/////////////////////////////
向Select里添加Option
function fnAddItem(text,value)
{
var selTarget = document.getElementById("selID");
selTarget.Add(new Option("text","value"));
}
2、删除Select里的Option
function fnRemoveItem()
{
var selTarget = document.getElementById("selID");
if(selTarget.selectedIndex > -1)
{//说明选中
for(var i=0;i<selTarget.options.length;i++)
{
if(selTarget.options[i].selected)
{
selTarget.remove(i);
i = i - 1;//注意这一行
}
}
}
}
3、移动Select里的Option到另一个Select中
function fnMove(fromSelectID,toSelectID)
{
var from = document.getElementById(fromSelectID);
var to = document.getElementById(toSelectID);
for(var i=0;i<from.options.length;i++)
{
if(from.options[i].selected)
{
to.appendChild(from.options[i]);
i = i - 1;
}
}
}
if 里的代码也可用下面几句代码代替
var op = from.options[i];
to.options.add(new Option(op.text, op.value));
from.remove(i);
4、Select里Option的上下移动
function fnUp()
{
var sel = document.getElementById("selID");
for(var i=1; i < sel.length; i++)
{//最上面的一个不需要移动,所以直接从i=1开始
if(sel.options[i].selected)
{
if(!sel.options.item(i-1).selected)
{//上面的一项没选中,上下交换
var selText = sel.options[i].text;
var selValue = sel.options[i].value;
sel.options[i].text = sel.options[i-1].text;
sel.options[i].value = sel.options[i-1].value;
sel.options[i].selected = false;
sel.options[i-1].text = selText;
sel.options[i-1].value = selValue;
sel.options[i-1].selected=true;
}
}
}
}
在进行上下两项互换时,也可以使用以下代码,但是效率很低,因为每一次的Dom操作都将导致整个页面的重新布局,所以不如直接修改元素的属性值。
var oOption = sel.options[i]
var oPrevOption = sel.options[i-1]
sel.insertBefore(oOption,oPrevOption);
向下移动同理
function fnDown()
{
var sel = fnGetTarget("selLeftOrRight");
for(var i=sel.length -2; i >= 0; i--)
{//向下移动,最后一个不需要处理,所以直接从倒数第二个开始
if(sel.options.item(i).selected)
{
if(!sel.options.item(i+1).selected)
{//下面的Option没选中,上下互换
var selText = sel.options.item(i).text;
var selValue = sel.options.item(i).value;
sel.options.item(i).text = sel.options.item(i+1).text;
sel.options.item(i).value = sel.options.item(i+1).value;
sel.options.item(i).selected = false;
sel.options.item(i+1).text = selText;
sel.options.item(i+1).value = selValue;
sel.options.item(i+1).selected=true;
}
}
}
}
5、Select里Option的排序
这里借助Array对象的sort方法进行操作,sort方法接受一个function参数,可以在这个function里定义排序时使用的算法逻辑。
array.sort([compareFunction]) 里compareFunction接受两个参数(p1,p2),sort操作进行时,array对象会每次传两个值进去,进行比较; compareFunciton必须返回一个整数值:当返回值>0时,p1会排在p2后面;返回值<0时,p1会排在p2前面;返回值=0 时,不进行操作。
例如:
function fnCompare(a,b)
{
if (a < b)
return -1;
if (a > b)
return 1;
return 0;
}
var arr = new Array();
//add some value into arr
arr.sort(fnCompare);
//这里sort的操作结果就是arr里的项按由小到大的升序排序
//如果把fnCompare里改为
//if (a < b)
// return 1;
//if (a > b)
// return -1;
//return 0;
//则sort的结果是降序排列
好,下面就是对Select里Option的排序
//因为排序可以按Option的Value排序,也可以按Text排序,这里只演示按Value排序
function sortItem()
{
var sel = document.getElementById("selID");
var selLength = sel.options.length;
var arr = new Array();
var arrLength;
//将所有Option放入array
for(var i=0;i<selLength;i++)
{
arr[i] = sel.options[i];
}
arrLength = arr.length;
arr.sort(fnSortByValue);//排序
//先将原先的Option删除
while(selLength--)
{
sel.options[selLength] = null;
}
//将经过排序的Option放回Select中
for(i=0;i<arrLength;i++)
{
sel.add(new Option(arr[i].text,arr[i].value));
}
}
function fnSortByValue(a,b)
{
var aComp = a.value.toString();
var bComp = b.value.toString();
if (aComp < bComp)
return -1;
if (aComp > bComp)
return 1;
return 0;
}
==========================================
/********************************
* table methods
*********************************/
bes.table={
//find whether there be one selected checkbox
checkHasSelectedBoxes:function(ele, name){
var table = bes.table.getParentTable(ele);
if(!table)return false;
var chks = bes.table.getFirstCheckboxes(table, name);
if(!chks)return false;
if(chks.length < 1)return false;
if(chks.length == 1 && chks[0] == ele)return false;
for(var i=0;i<chks.length-1;i++){
if(!chks[i].disabled)return true;
}
return false;
},
//get all selected checkboxs
getSelectedCheckboxs:function(table, name){
var chks = this.getFirstCheckboxes(table, name);
var arr = new Array();
for(var i = 0; i < chks.length-1; i ++){
if(!chks[i].checked)continue;
arr[arr.length] = chks[i];
}
return arr;
},
//get all checkboxes(selected or not)
getCheckboxSelects:function(table, name){
var chks = this.getFirstCheckboxes(table, name);
return chks.slice(0, chks.length - 1);
},
//get checkbox in the first cell of head rows
getCheckboxAllSelect:function(table, name){
var chks = this.getFirstCheckboxes(table, name);
return chks[chks.length - 1];
},
//get table checkbox selection status, with has checked and all checked status
getCheckboxStatus:function(table, name, checkbox){
var chks = this.getFirstCheckboxes(table, name);
var allCheck = chks[chks.length-1];
allCheck.checked=checkbox?checkbox.checked:true;
var hasChecked = false;
for(var i = chks.length - 2; i >=0; i --){
if(chks[i].disabled)continue;
if(chks[i].checked){
hasChecked=true;
}else{
allCheck.checked = false;
}
}
return {
allChecked:allCheck.checked,
hasChecked:hasChecked
};
},
//
selectCheckboxAll:function(checkbox, name){
var table = this.getParentTable(checkbox);
var chks = this.getFirstCheckboxes(table, name);
for(var i = chks.length - 2; i >=0; i --){
if(chks[i].disabled)continue;
this.selectCheckbox(chks[i], checkbox.checked);
}
},
selectCheckbox:function(chk, checked){
var c = checked;
if(null == checked)c = chk.checked;
var row = this.getParentNode(chk, "TR");
if(c){
bes.addClass(row, "SelectedRow");
}else{
bes.delClass(row, "SelectedRow");
}
row._selected_ = c;
if(null != checked)chk.checked = checked;
},
onSelectCheckbox:function(checkbox){
this.selectCheckbox(checkbox);
var table = this.getParentTable(checkbox);
return this.getCheckboxStatus(table, checkbox.name, checkbox);
},
getParentNode:function(node, tag){
do{
if(node.tagName)if(node.tagName.toUpperCase()==tag){
return node;
}
node = node.parentNode;
}while(node);
return false;
},
getParentTable:function(node){
return bes.table.getParentNode(node, "TABLE");
},
getFirstCheckboxes:function(table, name){
var rs = table.rows;
var chks = new Array();
var chkAll = false;
for(var i=0; i < rs.length; i ++){
var cs = rs[i].cells;
for(var j=0; j < 2 && j < cs.length; j ++){
var ns = cs[j].childNodes;
for(var k=0; k<ns.length; k ++){
var n = ns[k];
if(n.type!="checkbox")continue;
if(n.name!=name){
if(!chkAll && i == 0 && (!n.name || n.name=="")){
chkAll = n;
}
continue;
}
chks.push(n);
ns=false;
break;
}
if(!ns)break;
}
}
chks.push(chkAll);
return chks;
},
getSorter:function(table, thbase){
if(table.data)return table.data;
table.$ = table.getElementsByTagName;
function parseInner(inner){
inner = inner + "";
var idx = inner.indexOf("<!--");
if(idx < 0)return [inner];
return [inner.substring(0, idx).split(" ").join(" ").trim(),
inner.substring(idx + 4).replace("-->", "").replaceAll(" ", " ").trim()];
}
function sortChar(asc){
return " <span class='TableSorter'>" + String.fromCharCode(9655 - 5 * asc) + "</span>"
}
function getTableHeaders(table, thbase){
var headers = table.$("THEAD")[0].getElementsByTagName("TR")[0].getElementsByTagName("TH");
for(var i = 0; i < headers.length; i ++){
var h = headers[i];
var d = parseInner(h.innerHTML);
if(d.length < 2)continue;
d = {
label:d[0],
type:d[1],
idx:i
};
d.sort=0;//0 --null/1 --asc/-1 --desc
h.d = d;
h.d.table = table;
h.innerHTML=d.label;
h.onclick=function(){
if(!this.d)return;
this.d.table.data.sort(this.d.idx);
}
}
for(var i = 0; i < headers.length; i ++){
var h = headers[i];
if(!h.d)continue;
if(h.d.type.charAt(0) == "&"){
var v = parseInt(h.d.type.substring(1)) + thbase;
v = headers[v];
if(v.d){
h.d.as = v;
}else{
h.d = false;
}
}
}
return headers;
}
function getTableRows(table){
table.data.tbody = table.$("TBODY")[0];
var rows = table.data.tbody.getElementsByTagName("TR");
table.data.rows = [];
var headers = table.data.headers;
for(var i = 0; i < rows.length; i ++){
var row = rows[i];
table.data.rows.push(row);
row.cs = row.getElementsByTagName("TD");
for(var j=0; j<row.cs.length; j ++){
var h = headers[j];
if(!h || !h.d || h.d.as)continue;
var c = row.cs[j];
c.v = parseInner(c.innerHTML);
if(c.v.length < 2){
c.v = c.v[0];
}else{
c.v = c.v[1];
}
if(h.d.type == "num"){
try{
c.v = parseInt(c.v);
}catch(e){
c.v = null;
}
if(isNaN(c.v))c.v=null;
}
}
}
}
table.data = {
headers:getTableHeaders(table, thbase?thbase:0)
};
getTableRows(table);
table.data.sorter = function(r1, r2){
var ss = table.data.sorters;
for(var i = 0; i < ss.length; i ++){
var d = ss[i].d;
var v1 = r1.cs[d.idx].v;
var v2 = r2.cs[d.idx].v;
if(v1 == v2)continue;
if(!v1)return -1 * d.sort;
if(!v2)return 1 * d.sort;
return (v1 > v2?1:-1) * d.sort;
}
return 0;
};
table.data.sorters = [];
table.data.rowsort = function(){//[h...]
var hs = table.data.sorters;
for(var i = hs.length - 1; i >= 0; i --){
var h = hs[i];
if(i==0){
h.innerHTML = h.d.label + sortChar(h.d.sort);
}else{
h.innerHTML = h.d.label;
}
}
this.rows.sort(this.sorter);
};
table.data.initSorters = function(opts){
var hs = [].concat(this.sorters);
hs.reverse();
for(var i=opts.length - 1; i >=0; i --){
var opt = opts[i];
if(!opt && opt != 0)continue
if(!opt.idx){
opt={
idx:opt
};
}
if(!opt.sort){
opt.sort="r";
}
var h = this.headers[opt.idx];
if(!h.d)continue;
if(h.d.as)h=h.d.as;
for(var j = 0; j < hs.length; j ++){
if(hs[j] == h)hs[j] = false;
}
switch(opt.sort){
case "a": h.d.sort=1; break;
case "d": h.d.sort=-1; break;
default://r
if(h.d.sort == 0){
h.d.sort=1;
}else {
h.d.sort=0 - h.d.sort;
}
}
hs.push(h);
}
this.sorters = [];
for(var i = hs.length - 1; i >= 0; i --){
var h = hs[i];
if(!h)continue;
this.sorters.push(h);
}
};
table.data.sort = function(){
this.initSorters(arguments);
this.rowsort();
var inputs = table.$("INPUT");
var selected = [];
for(var i = 0; i < inputs.length; i ++){
var ipt = inputs[i];
if(ipt.checked)selected.push(ipt);
}
//rebuild table
for(var i = 0; i < this.rows.length; i ++){
var r = this.rows[i];
this.tbody.removeChild(r);
this.tbody.appendChild(r);
bes.delClass(r, "Row" + (i % 2 - 1));
bes.addClass(r, "Row" + (i % 2));
}
for(var i = 0; i < selected.length; i ++){
selected[i].checked = true;
}
};
return table.data;
},
initSorter:function(ele, thbase, thidx){
var t =bes.table.getParentTable(ele);
bes.table.getSorter(t, thbase);
t.data.sort(thbase + thidx);
},
currow:null,
overRow:function(row){
if(this.currow)this.outRow(this.currow);
this.currow = row;
bes.addClass(row, "CurrentRow");
},
outRow:function(row){
bes.delClass(row, "CurrentRow");
this.currow = null;
}
}
=========================================
/********************************
* remove rows of properties table
*********************************/
bes.removeRow=function(table,name){
try{
for(var i=table.rows.length - 1; i > 0 ; i --){
var row = table.rows[i];
var chx = row.cells[0].childNodes[0];
if(null != chx && chx.checked){
table.deleteRow(i);
}else if(row._selected_){
table.deleteRow(i);
}
}
var status=bes.table.getCheckboxAllSelect(table,name);
bes.table.selectCheckbox(status, false);
}catch(e){}
bes.setRowClass(table);
}
/********************************
* remove all rows of Properties table
*********************************/
bes.removeAllRows=function(table,name){
try{
for(var i=table.rows.length - 1; i > 0 ; i --){
table.deleteRow(i);
}
var status=bes.table.getCheckboxAllSelect(table,name);
bes.table.selectCheckbox(status, false);
}catch(e){}
}
function jsSelectIsExitItem(objSelect,objItemValue)
{
var isExit = false;
for(var i=0;i<objSelect.options.length;i++)
{
if(objSelect.options[i].value == objItemValue)
{
isExit = true;
break;
}
}
return isExit;
}
//2.向select选项中 加入一个Item
function jsAddItemToSelect(objSelect,objItemText,objItemValue)
{
//判断是否存在
if(jsSelectIsExitItem(objSelect,objItemValue))
{
alert("该Item的Value值已经存在");
}
else
{
var varItem = new Option(objItemText,objItemValue);
// objSelect.options[objSelect.options.length] = varItem;
objSelect.options.add(varItem);
alert("成功加入");
}
}
//3.从select选项中 删除一个Item
function jsRemoveItemFromSelect(objSelect,objItemValue)
{
//判断是否存在
if(jsSelectIsExitItem(objSelect,objItemValue))
{
for(var i=0;i<objSelect.options.length;i++)
{
if(objSelect.options[i].value == objItemValue)
{
objSelect.options.remove(i);
break;
}
}
alert("成功删除");
}
else
{
alert("该select中 不存在该项");
}
}
//4.修改select选项中 value="paraValue"的text为"paraText"
function jsUpdateItemToSelect(objSelect,objItemText,objItemValue)
{
//判断是否存在
if(jsSelectIsExitItem(objSelect,objItemValue))
{
for(var i=0;i<objSelect.options.length;i++)
{
if(objSelect.options[i].value == objItemValue)
{
objSelect.options[i].text = objItemText;
break;
}
}
alert("成功修改");
}
else
{
alert("该select中 不存在该项");
}
}
//5.设置select中text="paraText"的第一个Item为选中
function jsSelectItemByValue(objSelect,objItemText)
{
//判断是否存在
var isExit = false;
for(var i=0;i<objSelect.options.length;i++)
{
if(objSelect.options[i].text == objItemText)
{
objSelect.options[i].selected = true;
isExit = true;
break;
}
}
//Show出结果
if(isExit)
{
alert("成功选中");
}
else
{
alert("该select中 不存在该项");
}
}
//6.设置select中value="paraValue"的Item为选中
//document.all.objSelect.value = objItemValue;
//7.得到select的当前选中项的value
//var currSelectValue = document.all.objSelect.value;
//8.得到select的当前选中项的text
//var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
//9.得到select的当前选中项的Index
//var currSelectIndex = document.all.objSelect.selectedIndex;
//10.清空select的项
// document.all.objSelect.options.length = 0;
/////////////////////////////
向Select里添加Option
function fnAddItem(text,value)
{
var selTarget = document.getElementById("selID");
selTarget.Add(new Option("text","value"));
}
2、删除Select里的Option
function fnRemoveItem()
{
var selTarget = document.getElementById("selID");
if(selTarget.selectedIndex > -1)
{//说明选中
for(var i=0;i<selTarget.options.length;i++)
{
if(selTarget.options[i].selected)
{
selTarget.remove(i);
i = i - 1;//注意这一行
}
}
}
}
3、移动Select里的Option到另一个Select中
function fnMove(fromSelectID,toSelectID)
{
var from = document.getElementById(fromSelectID);
var to = document.getElementById(toSelectID);
for(var i=0;i<from.options.length;i++)
{
if(from.options[i].selected)
{
to.appendChild(from.options[i]);
i = i - 1;
}
}
}
if 里的代码也可用下面几句代码代替
var op = from.options[i];
to.options.add(new Option(op.text, op.value));
from.remove(i);
4、Select里Option的上下移动
function fnUp()
{
var sel = document.getElementById("selID");
for(var i=1; i < sel.length; i++)
{//最上面的一个不需要移动,所以直接从i=1开始
if(sel.options[i].selected)
{
if(!sel.options.item(i-1).selected)
{//上面的一项没选中,上下交换
var selText = sel.options[i].text;
var selValue = sel.options[i].value;
sel.options[i].text = sel.options[i-1].text;
sel.options[i].value = sel.options[i-1].value;
sel.options[i].selected = false;
sel.options[i-1].text = selText;
sel.options[i-1].value = selValue;
sel.options[i-1].selected=true;
}
}
}
}
在进行上下两项互换时,也可以使用以下代码,但是效率很低,因为每一次的Dom操作都将导致整个页面的重新布局,所以不如直接修改元素的属性值。
var oOption = sel.options[i]
var oPrevOption = sel.options[i-1]
sel.insertBefore(oOption,oPrevOption);
向下移动同理
function fnDown()
{
var sel = fnGetTarget("selLeftOrRight");
for(var i=sel.length -2; i >= 0; i--)
{//向下移动,最后一个不需要处理,所以直接从倒数第二个开始
if(sel.options.item(i).selected)
{
if(!sel.options.item(i+1).selected)
{//下面的Option没选中,上下互换
var selText = sel.options.item(i).text;
var selValue = sel.options.item(i).value;
sel.options.item(i).text = sel.options.item(i+1).text;
sel.options.item(i).value = sel.options.item(i+1).value;
sel.options.item(i).selected = false;
sel.options.item(i+1).text = selText;
sel.options.item(i+1).value = selValue;
sel.options.item(i+1).selected=true;
}
}
}
}
5、Select里Option的排序
这里借助Array对象的sort方法进行操作,sort方法接受一个function参数,可以在这个function里定义排序时使用的算法逻辑。
array.sort([compareFunction]) 里compareFunction接受两个参数(p1,p2),sort操作进行时,array对象会每次传两个值进去,进行比较; compareFunciton必须返回一个整数值:当返回值>0时,p1会排在p2后面;返回值<0时,p1会排在p2前面;返回值=0 时,不进行操作。
例如:
function fnCompare(a,b)
{
if (a < b)
return -1;
if (a > b)
return 1;
return 0;
}
var arr = new Array();
//add some value into arr
arr.sort(fnCompare);
//这里sort的操作结果就是arr里的项按由小到大的升序排序
//如果把fnCompare里改为
//if (a < b)
// return 1;
//if (a > b)
// return -1;
//return 0;
//则sort的结果是降序排列
好,下面就是对Select里Option的排序
//因为排序可以按Option的Value排序,也可以按Text排序,这里只演示按Value排序
function sortItem()
{
var sel = document.getElementById("selID");
var selLength = sel.options.length;
var arr = new Array();
var arrLength;
//将所有Option放入array
for(var i=0;i<selLength;i++)
{
arr[i] = sel.options[i];
}
arrLength = arr.length;
arr.sort(fnSortByValue);//排序
//先将原先的Option删除
while(selLength--)
{
sel.options[selLength] = null;
}
//将经过排序的Option放回Select中
for(i=0;i<arrLength;i++)
{
sel.add(new Option(arr[i].text,arr[i].value));
}
}
function fnSortByValue(a,b)
{
var aComp = a.value.toString();
var bComp = b.value.toString();
if (aComp < bComp)
return -1;
if (aComp > bComp)
return 1;
return 0;
}
==========================================
/********************************
* table methods
*********************************/
bes.table={
//find whether there be one selected checkbox
checkHasSelectedBoxes:function(ele, name){
var table = bes.table.getParentTable(ele);
if(!table)return false;
var chks = bes.table.getFirstCheckboxes(table, name);
if(!chks)return false;
if(chks.length < 1)return false;
if(chks.length == 1 && chks[0] == ele)return false;
for(var i=0;i<chks.length-1;i++){
if(!chks[i].disabled)return true;
}
return false;
},
//get all selected checkboxs
getSelectedCheckboxs:function(table, name){
var chks = this.getFirstCheckboxes(table, name);
var arr = new Array();
for(var i = 0; i < chks.length-1; i ++){
if(!chks[i].checked)continue;
arr[arr.length] = chks[i];
}
return arr;
},
//get all checkboxes(selected or not)
getCheckboxSelects:function(table, name){
var chks = this.getFirstCheckboxes(table, name);
return chks.slice(0, chks.length - 1);
},
//get checkbox in the first cell of head rows
getCheckboxAllSelect:function(table, name){
var chks = this.getFirstCheckboxes(table, name);
return chks[chks.length - 1];
},
//get table checkbox selection status, with has checked and all checked status
getCheckboxStatus:function(table, name, checkbox){
var chks = this.getFirstCheckboxes(table, name);
var allCheck = chks[chks.length-1];
allCheck.checked=checkbox?checkbox.checked:true;
var hasChecked = false;
for(var i = chks.length - 2; i >=0; i --){
if(chks[i].disabled)continue;
if(chks[i].checked){
hasChecked=true;
}else{
allCheck.checked = false;
}
}
return {
allChecked:allCheck.checked,
hasChecked:hasChecked
};
},
//
selectCheckboxAll:function(checkbox, name){
var table = this.getParentTable(checkbox);
var chks = this.getFirstCheckboxes(table, name);
for(var i = chks.length - 2; i >=0; i --){
if(chks[i].disabled)continue;
this.selectCheckbox(chks[i], checkbox.checked);
}
},
selectCheckbox:function(chk, checked){
var c = checked;
if(null == checked)c = chk.checked;
var row = this.getParentNode(chk, "TR");
if(c){
bes.addClass(row, "SelectedRow");
}else{
bes.delClass(row, "SelectedRow");
}
row._selected_ = c;
if(null != checked)chk.checked = checked;
},
onSelectCheckbox:function(checkbox){
this.selectCheckbox(checkbox);
var table = this.getParentTable(checkbox);
return this.getCheckboxStatus(table, checkbox.name, checkbox);
},
getParentNode:function(node, tag){
do{
if(node.tagName)if(node.tagName.toUpperCase()==tag){
return node;
}
node = node.parentNode;
}while(node);
return false;
},
getParentTable:function(node){
return bes.table.getParentNode(node, "TABLE");
},
getFirstCheckboxes:function(table, name){
var rs = table.rows;
var chks = new Array();
var chkAll = false;
for(var i=0; i < rs.length; i ++){
var cs = rs[i].cells;
for(var j=0; j < 2 && j < cs.length; j ++){
var ns = cs[j].childNodes;
for(var k=0; k<ns.length; k ++){
var n = ns[k];
if(n.type!="checkbox")continue;
if(n.name!=name){
if(!chkAll && i == 0 && (!n.name || n.name=="")){
chkAll = n;
}
continue;
}
chks.push(n);
ns=false;
break;
}
if(!ns)break;
}
}
chks.push(chkAll);
return chks;
},
getSorter:function(table, thbase){
if(table.data)return table.data;
table.$ = table.getElementsByTagName;
function parseInner(inner){
inner = inner + "";
var idx = inner.indexOf("<!--");
if(idx < 0)return [inner];
return [inner.substring(0, idx).split(" ").join(" ").trim(),
inner.substring(idx + 4).replace("-->", "").replaceAll(" ", " ").trim()];
}
function sortChar(asc){
return " <span class='TableSorter'>" + String.fromCharCode(9655 - 5 * asc) + "</span>"
}
function getTableHeaders(table, thbase){
var headers = table.$("THEAD")[0].getElementsByTagName("TR")[0].getElementsByTagName("TH");
for(var i = 0; i < headers.length; i ++){
var h = headers[i];
var d = parseInner(h.innerHTML);
if(d.length < 2)continue;
d = {
label:d[0],
type:d[1],
idx:i
};
d.sort=0;//0 --null/1 --asc/-1 --desc
h.d = d;
h.d.table = table;
h.innerHTML=d.label;
h.onclick=function(){
if(!this.d)return;
this.d.table.data.sort(this.d.idx);
}
}
for(var i = 0; i < headers.length; i ++){
var h = headers[i];
if(!h.d)continue;
if(h.d.type.charAt(0) == "&"){
var v = parseInt(h.d.type.substring(1)) + thbase;
v = headers[v];
if(v.d){
h.d.as = v;
}else{
h.d = false;
}
}
}
return headers;
}
function getTableRows(table){
table.data.tbody = table.$("TBODY")[0];
var rows = table.data.tbody.getElementsByTagName("TR");
table.data.rows = [];
var headers = table.data.headers;
for(var i = 0; i < rows.length; i ++){
var row = rows[i];
table.data.rows.push(row);
row.cs = row.getElementsByTagName("TD");
for(var j=0; j<row.cs.length; j ++){
var h = headers[j];
if(!h || !h.d || h.d.as)continue;
var c = row.cs[j];
c.v = parseInner(c.innerHTML);
if(c.v.length < 2){
c.v = c.v[0];
}else{
c.v = c.v[1];
}
if(h.d.type == "num"){
try{
c.v = parseInt(c.v);
}catch(e){
c.v = null;
}
if(isNaN(c.v))c.v=null;
}
}
}
}
table.data = {
headers:getTableHeaders(table, thbase?thbase:0)
};
getTableRows(table);
table.data.sorter = function(r1, r2){
var ss = table.data.sorters;
for(var i = 0; i < ss.length; i ++){
var d = ss[i].d;
var v1 = r1.cs[d.idx].v;
var v2 = r2.cs[d.idx].v;
if(v1 == v2)continue;
if(!v1)return -1 * d.sort;
if(!v2)return 1 * d.sort;
return (v1 > v2?1:-1) * d.sort;
}
return 0;
};
table.data.sorters = [];
table.data.rowsort = function(){//[h...]
var hs = table.data.sorters;
for(var i = hs.length - 1; i >= 0; i --){
var h = hs[i];
if(i==0){
h.innerHTML = h.d.label + sortChar(h.d.sort);
}else{
h.innerHTML = h.d.label;
}
}
this.rows.sort(this.sorter);
};
table.data.initSorters = function(opts){
var hs = [].concat(this.sorters);
hs.reverse();
for(var i=opts.length - 1; i >=0; i --){
var opt = opts[i];
if(!opt && opt != 0)continue
if(!opt.idx){
opt={
idx:opt
};
}
if(!opt.sort){
opt.sort="r";
}
var h = this.headers[opt.idx];
if(!h.d)continue;
if(h.d.as)h=h.d.as;
for(var j = 0; j < hs.length; j ++){
if(hs[j] == h)hs[j] = false;
}
switch(opt.sort){
case "a": h.d.sort=1; break;
case "d": h.d.sort=-1; break;
default://r
if(h.d.sort == 0){
h.d.sort=1;
}else {
h.d.sort=0 - h.d.sort;
}
}
hs.push(h);
}
this.sorters = [];
for(var i = hs.length - 1; i >= 0; i --){
var h = hs[i];
if(!h)continue;
this.sorters.push(h);
}
};
table.data.sort = function(){
this.initSorters(arguments);
this.rowsort();
var inputs = table.$("INPUT");
var selected = [];
for(var i = 0; i < inputs.length; i ++){
var ipt = inputs[i];
if(ipt.checked)selected.push(ipt);
}
//rebuild table
for(var i = 0; i < this.rows.length; i ++){
var r = this.rows[i];
this.tbody.removeChild(r);
this.tbody.appendChild(r);
bes.delClass(r, "Row" + (i % 2 - 1));
bes.addClass(r, "Row" + (i % 2));
}
for(var i = 0; i < selected.length; i ++){
selected[i].checked = true;
}
};
return table.data;
},
initSorter:function(ele, thbase, thidx){
var t =bes.table.getParentTable(ele);
bes.table.getSorter(t, thbase);
t.data.sort(thbase + thidx);
},
currow:null,
overRow:function(row){
if(this.currow)this.outRow(this.currow);
this.currow = row;
bes.addClass(row, "CurrentRow");
},
outRow:function(row){
bes.delClass(row, "CurrentRow");
this.currow = null;
}
}
=========================================
/********************************
* remove rows of properties table
*********************************/
bes.removeRow=function(table,name){
try{
for(var i=table.rows.length - 1; i > 0 ; i --){
var row = table.rows[i];
var chx = row.cells[0].childNodes[0];
if(null != chx && chx.checked){
table.deleteRow(i);
}else if(row._selected_){
table.deleteRow(i);
}
}
var status=bes.table.getCheckboxAllSelect(table,name);
bes.table.selectCheckbox(status, false);
}catch(e){}
bes.setRowClass(table);
}
/********************************
* remove all rows of Properties table
*********************************/
bes.removeAllRows=function(table,name){
try{
for(var i=table.rows.length - 1; i > 0 ; i --){
table.deleteRow(i);
}
var status=bes.table.getCheckboxAllSelect(table,name);
bes.table.selectCheckbox(status, false);
}catch(e){}
}
发表评论
-
Chrome扩展程序-BES Blocker
2020-11-27 08:35 257## 使用说明 - Change the response ... -
全国最新行政区划代码(Tree)json数据以及地理数据
2020-11-11 21:23 387基于阿里提供的地理数据 http://datav.aliyun ... -
百度搜索api
2020-11-07 15:26 695<div class="iteye-blog- ... -
Puppeteer 说明记录
2020-11-06 10:52 646<div class="iteye-blo ... -
文本水印
2019-12-20 17:55 479打开控制台,copy如下代码: (functio ... -
unicode字符集特殊符号对应html/js/css符号
2019-04-24 14:46 797转自: http://www.cnblogs.com/cha ... -
网站灰度支持
2015-01-02 07:22 8931 <style>html {overflo ... -
js 端排序 获取td里边的内容去html串化
2014-09-26 18:12 880<script> function delHtml ... -
ie浏览器下的css expression使用
2014-03-06 16:39 1225针对ie浏览器有些情况下显示效果比较差,所以针对ie ... -
输入框自动填充效果 js
2013-12-28 15:58 6080<!doctype html> ... -
js 屏蔽form的onkeydown onkeyup onkeypress 的13按键
2013-07-11 10:49 1832js 屏蔽form的onkeydown onkeyup on ... -
Cookie path的设置
2013-02-21 10:58 1954cookie path 设置 IE对如下的co ... -
html5 (标签一览)
2012-10-16 19:22 1024html5 标签 按字母顺序排 ... -
一键分享腾讯微博,新浪微博等api(WEB 版)
2012-08-10 09:38 10447腾讯微博分享 <script type=" ... -
DOJO js 基本dom操作
2012-06-20 09:44 4625/** ** 基本的DOM操作只是用到了dojo的核 ... -
原始ajax api 操作
2012-04-12 18:00 1102String.prototype.trim = func ... -
js 动态 添加 删除 tr
2012-04-12 17:27 5766今天给新人出了一道题: dom 和 javascrip ... -
ie8下 vml
2012-04-01 13:51 1689近期在做web流程设计器,在ie7下没有问题,显示出来了,但是 ... -
flex vs html5
2011-12-18 18:09 2167何时使用HTML5,而不是Fl ... -
java毕业设计 计算机毕业设计 软件定制开发
2011-10-01 07:00 86工作室承接各种毕业设计以及软件定制开发。 java毕业设计 ...
相关推荐
接下来,我们使用JavaScript(通常配合jQuery库,但也可以使用原生JS)来实现全选/反选功能。这里我们使用jQuery: ```javascript $(document).ready(function() { $('#selectAll').click(function() { if ($...
在网页开发中,表格(Table)是展示数据的常用组件,而jQuery库为开发者提供了丰富的API,使得操作表格中的元素,如复选框(Checkbox),变得更加便捷。本篇将详细探讨如何利用jQuery实现表格中checkbox的相关事件...
本篇文章将深入探讨如何使用jQuery实现table表格中checkbox的全选功能,这是一个常见的需求,尤其在需要用户批量操作数据时。 首先,我们需要创建一个基本的HTML表格结构。在表格的表头部分,我们添加一个全选的...
3. 事件监听:监听layui table的`on`方法,特别是与分页相关的事件,如`page`或`checkbox`。当用户翻页时,触发相应的逻辑来更新复选框状态。 4. 自定义渲染:layui table支持自定义单元格的渲染,我们可以为复选框...
$('table tr').find('input[type=checkbox]').each(function(index) { if (index % 2 === 0) { $(this).prop('checked', true); } else { $(this).prop('checked', false); } }); }); ``` 以上就是使用...
在本例中,我们将探讨如何利用HTML的`checkbox`元素,JavaScript来实现全选/反选功能,并通过Servlet来处理数据库中的批量删除操作。 **一、Checkbox全选与反选** 1. **Checkbox基本概念**:Checkbox是HTML中的一...
2. JavaScript事件监听:使用`addEventListener`监听`change`事件,当全选`checkbox`被勾选或取消时触发相应的操作。 3. 全选逻辑:在事件处理函数中,遍历所有关联的`checkbox`,利用`checked`属性设置或清除它们的...
### JavaScript 动态生成 Table 及处理 在现代 Web 开发中,动态生成 HTML 元素是一种非常实用的技术,尤其当涉及到数据展示时,如表格(`<table>`)。通过 JavaScript 动态生成表格可以更加灵活地管理和更新数据。...
在表格的每一行中添加复选框,如`<input type="checkbox" class="selectBox">`,并为它们分配一个共享的类名,以便后续操作。 2. 多选事件处理: 使用`$('.selectBox').click(function() {...})`监听所有复选框的...
解决这一问题的关键在于调整用于操作CheckBox的JavaScript函数,使其能够正确识别和操作不同浏览器中的DOM元素。具体来说,我们需要修改`selectAll`函数,使其在不同的浏览器环境下都能够正确获取和设置CheckBox的...
.prepend('<input type="checkbox" value="CHK_ALL" id="' + options.select_table + '_chk_all" />'); ``` 2. 修改subscribeAllChk方法: 原来的代码: ```javascript $("#chk_all").click(function() { ```...
layui是一款基于前端JavaScript库的模块化前端框架,提供了丰富的UI组件,包括表格、表单、按钮等,而checkbox是其中常用的一种表单元素。 首先,我们要了解如何在layui中实现checkbox的默认选中。在HTML结构中,...
Table_Select_Row = $(item).parent("tr"); // 获取复选框所在的行 Table_Delete_Row_Back(); // 假设这是一个删除行的函数 P_F = 1; } }); if (P_F == 0) { alert("δѡκβ"); // 这里似乎是一些乱码,...
通过以上分析,我们可以看到,利用JavaScript实现基于`Shift`键的连续选择功能涉及到对DOM事件、数组操作以及条件判断的综合运用。这一功能不仅增强了用户界面的互动性,还提升了用户体验,特别是在处理大量数据的...
jqTable:一款集所有交互于一身的table组件 功能包括: 动态表格数据,提供更新...input type="checkbox" class="g-selectAll--input" 复选框选择单个 class="g-selectAll--btn" data-tag="select" 复选框按钮,点击在
在表头中,有一个特殊的全选 `<checkbox>`,其 `value="all"`,并绑定了 `selectall` 函数,当点击时会触发全选/取消全选操作。 接下来是WXSS部分,这部分定义了样式规则,使表格具有良好的视觉效果。`.table` 类...
<input type="checkbox" name="checkbox" value="${result.factoryID},${result.supplierI}" onclick="selectBox()" /> ${result.factoryShortName} ${result.supplierShortName} ${result.productNO} ${...
在这个场景下,JavaScript(简称js)作为一种客户端脚本语言,可以很好地实现这种交互。本文将详细探讨如何通过JavaScript实现GridView的全选功能,并提供相关代码示例。 首先,我们需要了解JavaScript的基本语法和...
在页面上添加一个`<input type="checkbox">`作为全选按钮,当用户点击该按钮时,通过JavaScript遍历所有行中的复选框(假设每个数据行都有一个对应的复选框),并设置它们的状态为选中。例如,你可以添加以下...