English
资源说明：自己常用的js库和写的一个交互型可编辑表格:
BaseJs库的一点源码:
/**
* 自定义javascript常用基础库 author zhang_jhai 创建时间 2010/04/10 最后修改时间 2010/05/03
* version 2.0
*/
// Base库基础类
BaseJs = function() {
// 判断浏览器类型
userAgent = navigator.userAgent.toLowerCase();
check = function(r) {
return r.test(userAgent);
};
isOpera = check(/opera/);
isIE = !isOpera && check(/msie/);
isIE7 = isIE && check(/msie 7/);
isIE8 = isIE && check(/msie 8/);
isIE6 = isIE && !isIE7 && !isIE8;
var base = {
isIE : isIE,
// 动态添加事件
addEvent : function(oTarget, sEventType, funName) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType.substring(2,
sEventType.length), funName, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent(sEventType, funName);
} else {
oTarget[sEventType] = funName;
}
},
// 删除事件
removeEvent : function(oTarget, sEventType, funName) {
if (oTarget.removeEventListener) {
oTarget.removeEventListener(sEventType.substring(1,
sEventType.length), funName, false);
} else if (oTarget.detachEvent) {
oTarget.detachEvent(sEventType, funName);
} else {
oTarget[sEventType] = null;
}
},
// 阻止事件冒泡行为
stopBubble : function(ev) {
// 如果传入了事件参数，则说明不是ie浏览器
if (ev && ev.stopPropagation) {
ev.stopPropagaton();
} else {
window.event.cancelBubble = true;
}
},
// 阻止事件默认浏览器行为
stopDefault : function(ev) {
// w3c标准
if (ev && ev.preventDefault) {
ev.preventDefault();
}
// ie
window.event.returnValue = false;
return false;
},
...........................
...........................
可编辑表格用法示例：
var buttons = BaseJs.getByTagName("img");
for (var i=0;i -1){
add = buttons[i];
}else if(src.indexOf('del')>-1){
del = buttons[i];
}else if(src.indexOf('save')>-1){
save = buttons[i];
}
}
EidtTable = new BaseJs.EditTable({
// 表对象
table : BaseJs.$("tabList"),
// 从第几行第几列开始可编辑
start : [2, 2],
// 到哪一行哪一列结束编辑 不写默认所有,写一个参数代表列,行不限
end : [],
// 新增操作
addAction : {
// (button)执行操作的按钮,
button : add,
// callback:执行操作后的回调函数，能够加入一些自定义操作
callback : function(tr) {
tr.onclick = function() {
var trs = BaseJs.getByTagName("tr",BaseJs.$("tagList"));
for (var i = 0; i < trs.length; i++) {
trs[i].style.background = '#FAFCFE';
}
tr.style.background = '#B8CCF0';
}
}
},
// 保存新增或更新操作
saveOrUpdateAction : {
button : save,
// 提交更新url,后台取参数data,为json字符串
url : 'WaterQualityAction?method=saveOrUpdate',
callback : function() {
document.location.reload();
}
},
// 删除操作
delAction : {
button : del,
// 删除url 可用函数返回动态url
url : function() {
return 'WaterQualityAction?method=del&mid='
+ document.getElementById("mid").value;
},
callback : function() {
document.location.reload();
}
},
// id名(记录的id值需要保存在tr.id上)
primaryKey : 'id',
// 要全并的列数集合 [0]代表第一列要执行合并操作,[0,1]代表1，2列有合并操作
mergeColumn : [0,1],
// 列描述对象 ,包含一个数组，数组中每一个对象说明一个列编辑对象和相关处理
column : [
{
// 列名
name : 'areaName',
// 编辑类型 当前支持三种编辑方式text(文本框)date(日期型)select(选择框)
editorType : 'select',
//数据来源
dataUrl : 'WaterQualityAction?method=AjaxSelect¶=AREANAME&dataSource=db'
}, {
name : 'sectionName',
editorType : 'select',
// 支持动态url,传入参数为当前操作的td对象
dataUrl : function(me){
pre = me;
while(pre.tagName.toLowerCase() != "td"){
pre = pre.parentNode;
}
pre = BaseJs.element.prev(pre);
parentText = BaseJs.text(pre);
if(parentText == "请修改数据"){
alert("请先修改水功能区名!");
return false;
}
return 'WaterQualityAction?method=AjaxSelect¶=sectionNAME&dataSource=db&parentText='+parentText;
}
}, {
name : 'date_month',
// 日期型
editorType : 'date',
// 格式化日期样式,默认yyyy-MM
format : 'yyyy年MM月份',
//自定义默认值
defaultValue : BaseJs.Utils.format
.date(new Date(), 'yyyy年MM月份')
}, {
name : 'quality_level',
// 选择型
editorType : 'select',
// 加载select数据url,返回json数据，格式应为:[{display:'',value:''},{display:'',value:''}]
dataUrl : 'WaterQualityAction?method=AjaxSelect¶=LEVEL',
validate : function(value) {
return true;
},
// 新增默认值，不写使用默认
defaultValue : '请选择',
// 检验输入数据正确性,返回true通过验证
validate : function(v, obj) {
//alert("现在检验输入数据合法性!");
return true;
}
}, {
name : 'quality_state',
editorType : 'select',
dataUrl : 'WaterQualityAction?method=AjaxSelect¶=SELECT',
defaultValue : '请选择'
}, {
name : 'overproof',
editorType : 'text',
defaultValue : '----'
}, {
name : 'quality_target',
editorType : 'select',
dataUrl : 'WaterQualityAction?method=AjaxSelect¶=LEVEL',
defaultValue : '请选择'
}, {
name : 'area_qualityTarget',
editorType : 'text',
defaultValue : '请输入'
}]
});
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
