tgyd2006
- 浏览: 327080 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
y_715：
document.getElementById("e ...
JSTL EC TABLE extremeTable 学习 -
wangyj0898：
学习了。。。
display table 标签用法 -
hejiajie2008：
没有图啊
图解myeclipse把maven普通java项目变成web项目的全程操作 -
zhangyu_2100：
[align=center][/align][color=br ...
request.getRealPath()的替代方法 -
senhui19：
LZ写的真不错呀，现在开发中都经常是用DetachedCrit ...
Hibernate的Criteria用法总结
1.index.jsp
<%@ page contentType="text/html; charset=GBK" %>
<!-- 定义组件按钮样式 -->
<style>
.button {
width: 50px;
height: 22px;
font-size: 10px;
color: #000000;
border: #6B698C 1px solid;
cursor: hand;
vertical-align: middle;
}
</style>
<script type="text/javascript" src="scripts\selectlist.js"></script>
<script language="javascript">
function checkMenu(mid){
//判断是否选中，组件需要调用
var menus = [23,25];
for(var i = 0; i < menus.length; i++){
if(mid == menus[i]){
return true;
}
}
return false;
}
//准备组件数据
//数据项分别是：选中时的值（内码），显示名，是否选中，排序码（外码），级次
var items =
[
[ "21", "测试管理", checkMenu(21), "200", 1],
[ "22", "测试单表", checkMenu(22), "200001", 2],
[ "23", "系统管理", checkMenu(23), "800", 1],
[ "24", "组织管理", checkMenu(24), "800800", 2],
[ "25", "基本机构信息", checkMenu(25), "800800700", 3],
[ "26", "组织机构维护", checkMenu(26), "800800800", 3],
[ "27", "职务管理", checkMenu(27), "800800900", 3],
[ "28", "用户管理", checkMenu(28), "800900", 2],
[ "29", "增加用户信息", checkMenu(28), "800900700", 3],
[ "30", "用户信息维护", checkMenu(30), "800900800", 3]
];
//实例化对象，参数分别是：要显示的列表数据，选择框的显示大小，是否以树状形式显示，是否显示层次码
var gbp_sl = new GBPSelectList("org", items, 10, 1, 1, "button");
var gbp_sl_my = new GBPSelectList("myorg", items, 10, 1, 0, "button");
var gbp_sl_list = new GBPSelectList("listorg", items, 10, 0, 0, "button");
</script>
<html>
<head>
<title>报告编制</title>
</head>
<body>
<form name="frmMain">
<table width="600px">
<tr bgcolor=#AAAA00>
<td>
<script>gbp_sl.make();</script>
</td>
</tr>
<tr bgcolor=#AAAA00>
<td>
<script>gbp_sl_my.make();</script>
</td>
</tr>
<tr bgcolor=#AAAA00>
<td>
<script>gbp_sl_list.make();</script>
</td>
</tr>
</table>
</form>
</body>
</html>
2.select.js
/*
-------------------------------------------------------------------------------
文件名称：select.js
说 明：JavaScript脚本，用于网页中涉及到选择时的控制,
版 本：1.0
修改纪录:
---------------------------------------------------------------------------
时间 修改人 说明
2004-8-11 zxl 创建
-------------------------------------------------------------------------------
*/
/*
用途：菜单配置页面中一级菜单被点击
输入: form对象
1.选中和单项选择一样，变颜色
2.没选中时则下级都不能选中
add by zbk
*/
function CA(CB){
if(CB.checked){
}else{
var frm=document.forms[0];
for (var i=0;i<frm.elements.length;i++)
{
var e=frm.elements[i];
if ( (e.type=='checkbox')&&
(CB.id.indexOf(e.id.substring(0,3))==0)&&e.disabled==false)
{
e.checked=false;
}
}
}
}
/*
用途：菜单配置页面中底级菜单项被点击
输入: form对象
1.对象选中则上级被选中，变颜色
2.对象没被选中则下级取消，变颜色
add by zbk
*/
function CCA(CB){//菜单配置页面中子菜单项被点击
if (CB==null) return;
var frm=document.forms[0];
if (CB.checked){
for (var i=0;i<frm.elements.length;i++)
{
var e=frm.elements[i];
if((e.type=='checkbox')&&(e.name=='menucheckbox')&&(CB.id.indexOf(e.id)==0)&&e.disabled==false)
{
e.checked=true;
}
}
}
else{
for (var i=0;i<frm.elements.length;i++)
{
var e=frm.elements[i];
if ( (e.type=='checkbox')&&
(e.id.indexOf(CB.id)==0)&&e.disabled==false)
{
e.checked=false;
}
}
}
}
/*
用途：如果只有一个选择框得到他的值
输入: chekname选择框对象名称
add by zbk
*/
function getselectedValue(chekname){
if (chekname==null) return '';
var length =0;
var i=0;
var count =0;
var frm=document.forms[0];
eles = frm.elements;
for (var i=0;i<frm.elements.length;i++)
{
obj= eles.item(i);
type = obj.attributes.item("type").nodeValue;
if(type == "checkbox" && obj.disabled==false &&obj.id!="selectAll" && obj.id==chekname && obj.checked){
return obj.value;
}
}
}
// 返回true表示选择，返回false表示没有选择
function selectedRadio(form){
var length =0;
var i=0;
eles = form.elements;
while( i<eles.length){
obj= eles.item(i);
type = obj.attributes.item("type").nodeValue;
if(type == "radio"){
if(obj.checked){
return true;
}
}
i++;
}
return false;
}
3.selectlist.js
/**
组件名称：
左右双向选择组件。
主要功能：
1> 提供两种风格-普通列表和树状列表。
2> 目前提供三个扩展函数
getSelectedValues： 获得选中的值，返回的是个包含节点编号的数组
getRows： 查看所有记录的详细信息，返回的是个包含节点对象的二维数组
getSelectedRows： 查看选中记录的详细信息，返回的是个包含节点对象的二维数组
备注说明：
树状风格时，选择上级会自动级联处理下级；选择下级则上级默认半选中；如果所有下级都选中，则上级选中。
一个页面只能使用一个组件（需要修改）
修改记录
2007-06-22
杨文彦
整理代码，添加注释，增加按钮样式
*/
/*==================== 组件对象代码 ====================*/
/*
1、构造方法
2、数据检查过滤方法
3、组件生成方法
4、选中/取消方法
5、全部选中/取消方法
6、页面数据显示方法*/
//构造函数
function GBPSelectList(nameSpace, items, size, isTreeStyle, isShowCode, ctrlStyle) {
this.multiple = true; //是否允许多选
this.listSize = size ? size : 20; //选择框的长度
this.isTreeStyle = Boolean(isTreeStyle); //是否用树状形式显示数据
this.isShowCode = Boolean(isShowCode); //如果是树状形式，是否显示层次码
this.ctrlStyle = ctrlStyle; //按钮样式
this.needOrder = true; //是否需要排序。（只在普通形式下起作用，树状时必须排序）
this.itemList = items; //存放所有选择元素的数组
this.leftSelect = null; //左边的选择框控件
this.rightSelect = null; //右边的选择框控件
this.leftDiv = null; //左边放置列表框的层
this.rightDiv = null; //右边放置列表框的层
this.leftDiv_innerHTML = ""; //左侧选择框层的内部元素，
this.rightDiv_innerHTML = ""; //右侧选择框层的内部元素
this.leftLabel = null; //左边的文字标签控件
this.rightLabel = null; //右边的文字标签控件
this.namespace = nameSpace; //控件名称的前缀
this.leftDivName = "divAll"; //左边放置列表框的层的名称
this.rightDivName = "divChecked"; //右边放置列表框的层的名称
this.leftSelectName = "sltAll"; //左边列表框的名称
this.rightSelectName = "sltChecked"; //右边列表框的名称
this.selectButton = "btnSelect"; //选中按钮的名称
this.selectAllButton = "btnSelectAll"; //选中所有按钮的名称
this.cancelButton = "btnCancel"; //取消选择按钮的名称
this.cancelAllButton = "btnCancelAll"; //取消所有按钮的名称
this.o_children = []; //一级节点列表
this.root = this; //根级节点-组件对象
this.nodes = {}; //存放所有节点
var o_this = this; //组件对象引用
this.buildNode = function(){ //处理组件显示数据，建立节点列表对象
if(this.isTreeStyle){
//构造树形显示风格
_build(o_this, 0);
}else{
//构造列表显示风格
for(var i = 0; i < this.itemList.length; i++){
new GBP_SL_Item(o_this, this.itemList[i]);
}
}
};
//在子类里迭代，是为了效率考虑。
function _build(father, level, start){
if(!start) start = 0;
for(var i = start; i < o_this.itemList.length; i++){
curLevel = o_this.itemList[i][4];
//是否属于本级节点
if(curLevel == (level + 1)){
var obj = new GBP_SL_Item(father, o_this.itemList[i]);
//继续下层递归
_build(obj, curLevel, i + 1);
}else if(curLevel <= level){
//结束本层递归
break;
}
}
}
}
//对数据进行检查、过滤、排序处理
GBPSelectList.prototype.prepareData = function() {
var list = new Array();
var arrays = this.itemList;
var _pre;
//按显示名排序
function _sortByName(a,b){
if(a[1] == b[1]) return 0
return (a[1] > b[1]) ? 1 : -1;
}
//按层次码排序
function _sortByTreeCode(a,b){
if(a[3] == b[3]) return 0
return (a[3] > b[3]) ? 1 : -1;
}
//检查数据是否完整，过滤不完整数据
for(var n = 0; n < arrays.length; n++){
var len = list.length;
//列表节点至少要求有两项数据
//树形节点至少要求有五项数据
if((!this.isTreeStyle && arrays[n].length >= 2) || (this.isTreeStyle && arrays[n].length >= 5)){
list[len] = arrays[n];
}
}
//排序
if(this.isTreeStyle){
list.sort(_sortByTreeCode);
}else if(this.needOrder){
list.sort(_sortByName);
}
//使用已经排序的节点列表替换原来未排序的节点列表
this.itemList = list;
}
//构造组件，并显示在页面上
GBPSelectList.prototype.make = function() {
//检查、过滤、排序数据
this.prepareData();
var txt , obj;
txt = "<table width='100%' height='100' border='0' align='center' cellpadding='0' cellspacing='0'>"
+ " <tr align='center'>"
+ " <td valign='top' width='30%'><div align='left' style='FONT-SIZE: 9pt;'>可用列表</div>"
+ " <div id='" + this.namespace + this.leftDivName + "'></div>"
+ " </td>"
+ " <td valign='middle' width='8%' >"
+ " <input type='button' name='" + this.namespace + this.selectButton + "' class='" + this.ctrlStyle + "' value=' > '><br><br>"
+ " <input type='button' name='" + this.namespace + this.selectAllButton + "' class='" + this.ctrlStyle + "' value=' >> '><br><br>"
+ " <input type='button' name='" + this.namespace + this.cancelButton + "' class='" + this.ctrlStyle + "' value=' < '><br><br>"
+ " <input type='button' name='" + this.namespace + this.cancelAllButton + "' class='" + this.ctrlStyle + "' value=' << '>"
+ " </td>"
+ " <td valign='top' width='30%'><div align='left' style='FONT-SIZE: 9pt;'>选择列表</div>"
+ " <div id='" + this.namespace + this.rightDivName + "' align='left'></div>"
+ " </td>"
+ " </tr>"
+ "</table>" ;
///生成对象
document.write(txt);
var oThis = this;
//关联控制对象
this.leftDiv = document.getElementById(this.namespace + this.leftDivName);
this.rightDiv = document.getElementById(this.namespace + this.rightDivName);
//关联按钮单击事件
obj = document.getElementById(this.namespace + this.selectButton);
obj.onclick = function() { oThis.doSelect(1) };
obj = document.getElementById(this.namespace + this.selectAllButton);
obj.onclick = function() { oThis.doAll(1) };
obj = document.getElementById(this.namespace + this.cancelButton);
obj.onclick = function() { oThis.doSelect(-1) };
obj = document.getElementById(this.namespace + this.cancelAllButton);
obj.onclick = function() { oThis.doAll(-1) };
//生成节点对象列表
this.buildNode();
//刷新页面显示
this.update();
};
//选中/取消选中
GBPSelectList.prototype.doSelect = function(isSelect) {
var values = new Array();
//处理哪个对象
var obj = (isSelect == 1) ? this.leftSelect : this.rightSelect;
//判断是否多选模式
if(this.multiple){
for(var i = 0; i < obj.options.length; i++){
if(obj.options[i].selected){
values[values.length] = obj.options[i].value;
}
}
}else{
if(obj.selectedIndex > -1){
values[0] = obj[obj.selectedIndex].value;
}
}
if( values.length == 0) return;
//处理下级节点
for(var n = 0; n < values.length; n++){
this.nodes[values[n]].doSelect(isSelect);
}
//刷新页面显示
this.update()
};
//全部选中/取消
GBPSelectList.prototype.doAll = function(isSelect) {
for(var i = 0; i < this.o_children.length; i++){
this.o_children[i].doSelect(isSelect);
}
this.update()
};
//更新select元素的界面显示
GBPSelectList.prototype.update = function(){
//用innerHTML来设置select元素，可以加快速度，减少屏幕闪烁
//给层元素赋初值
this.rightDiv_innerHTML = "<select name='" + this.namespace + this.rightSelectName + "' " + (this.multiple ? "multiple" : "") + " size='" + this.listSize + "' style='width:100%'>";
this.leftDiv_innerHTML = "<select name='" + this.namespace + this.leftSelectName + "' " + (this.multiple ? "multiple" : "") + " size='" + this.listSize + "' style='width:100%'>";
//处理子节点状态，根据子节点的状态设置父节点状态
for(var i = 0; i < this.o_children.length; i++){
this.o_children[i].doStatus();
}
//生成页面显示
for(var i = 0; i < this.o_children.length; i++){
this.o_children[i].update();
}
//直接用innerHTML，速度最快
this.leftDiv.innerHTML = this.leftDiv_innerHTML + "</select>";
this.rightDiv.innerHTML = this.rightDiv_innerHTML + "</select>";
//重新获取两侧select元素，并为其绑定双击事件
var oThis = this;
this.leftSelect = document.getElementById(this.namespace + this.leftSelectName);
this.leftSelect.ondblclick = function() { oThis.doSelect(1) };
this.rightSelect = document.getElementById(this.namespace + this.rightSelectName);
this.rightSelect .ondblclick = function() { oThis.doSelect(-1) };
};
/*==================== 节点对象代码 ====================*/
/*
1、构造方法
2、节点选择/取消方法
3、节点状态处理方法
4、节点页面显示实现方法*/
//节点对象
function GBP_SL_Item(o_parent, o_item){
this.father = o_parent; //上级节点引用
this.root = o_parent.root; //根级节点引用
this.o_children = []; //下级节点数组
this.info = o_item; //节点对象
this.status = o_item[2] ? 1 : -1 ; //节点是否默认选中标志
this.level = this.root.isTreeStyle ? o_item[4] : 1; //节点级次
this.value = o_item[0]; //节点编号
this.showText = o_item[1]; //节点显示名称
//根据定义处理显示名称格式
if(this.root.isShowCode)
// 是否显示层级编码
this.showText = this.showText + " - " + o_item[3];
if(this.level > 0)
//处理显示缩进
this.showText = "__________________".substr(0, (this.level - 1)).replace(/_/g, " ") + this.showText;
//加入父级节点的下级节点列表
o_parent.o_children[o_parent.o_children.length] = this;
//加入所有节点列表
this.root.nodes[this.value] = this;
}
//节点的选择函数
GBP_SL_Item.prototype.doSelect = function(isSelected){
this.status = isSelected;
//选择上级会自动选择其所有下级
for(var i = 0; i < this.o_children.length; i++){
this.o_children[i].doSelect(isSelected);
}
};
//递归处理指定节点及其下级节点状态
GBP_SL_Item.prototype.doStatus = function(){
//没有下级节点
if(this.o_children.length == 0) return this.status;
var selectedCount = 0, partSelectCount = 0, unselectedCount = 0;
var returnStatus = null;
for(var i = 0; i < this.o_children.length; i++){
//递归处理下级节点状态
returnStatus = this.o_children[i].doStatus();
if(returnStatus == 1) selectedCount += 1;
if(returnStatus == 0) partSelectCount += 1;
if(returnStatus == -1) unselectedCount += 1;
}
if(selectedCount > 0 && unselectedCount == 0 && partSelectCount == 0){
//下级全部选中
this.status = 1;
}else if(unselectedCount > 0 && selectedCount == 0 && partSelectCount == 0){
//下级一个都没选中
this.status = -1;
}else{
//下级部分选中
this.status = 0;
}
return this.status;
};
//更新界面显示
GBP_SL_Item.prototype.update = function(){
//status：1表示选中；0表示下级部分选中；-1表示未选
if(this.status == -1 || this.status == 0){
this.root.leftDiv_innerHTML += "<option value='" + this.value + "'>" + this.showText + "</option>\n";
}
if(this.status == 1 || this.status == 0){
this.root.rightDiv_innerHTML += "<option value='" + this.value + "'>" + this.showText + "</option>\n";
}
//递归处理下级节点
for(var i = 0; i < this.o_children.length; i++){
this.o_children[i].update();
}
};
/*==================== 组件扩展方法 ====================*/
//获得选中的值，返回的是个包含节点编号的数组
GBPSelectList.prototype.getSelectedValues = function() {
var values = new Array();
for(var n = 0; n < this.rightSelect.options.length; n++){
values[n] = this.rightSelect.options[n].value;
}
return values;
};
//查看右侧记录的详细信息，返回的是个包含节点对象的二维数组
GBPSelectList.prototype.getRows = function() {
var values = new Array();
for(var n = 0; n < this.rightSelect.options.length; n++){
values[values.length] = this.root.nodes[this.rightSelect.options[n].value].info;
}
return values;
};
//查看选中记录的详细信息，返回的是个包含节点对象的二维数组
GBPSelectList.prototype.getSelectedRows = function() {
var values = new Array();
for(var n = 0; n < this.rightSelect.options.length; n++){
if(this.rightSelect[n].selected)
values[values.length] = this.root.nodes[this.rightSelect.options[n].value].info;
}
return values;
};
<%@ page contentType="text/html; charset=GBK" %>
<!-- 定义组件按钮样式 -->
<style>
.button {
width: 50px;
height: 22px;
font-size: 10px;
color: #000000;
border: #6B698C 1px solid;
cursor: hand;
vertical-align: middle;
}
</style>
<script type="text/javascript" src="scripts\selectlist.js"></script>
<script language="javascript">
function checkMenu(mid){
//判断是否选中，组件需要调用
var menus = [23,25];
for(var i = 0; i < menus.length; i++){
if(mid == menus[i]){
return true;
}
}
return false;
}
//准备组件数据
//数据项分别是：选中时的值（内码），显示名，是否选中，排序码（外码），级次
var items =
[
[ "21", "测试管理", checkMenu(21), "200", 1],
[ "22", "测试单表", checkMenu(22), "200001", 2],
[ "23", "系统管理", checkMenu(23), "800", 1],
[ "24", "组织管理", checkMenu(24), "800800", 2],
[ "25", "基本机构信息", checkMenu(25), "800800700", 3],
[ "26", "组织机构维护", checkMenu(26), "800800800", 3],
[ "27", "职务管理", checkMenu(27), "800800900", 3],
[ "28", "用户管理", checkMenu(28), "800900", 2],
[ "29", "增加用户信息", checkMenu(28), "800900700", 3],
[ "30", "用户信息维护", checkMenu(30), "800900800", 3]
];
//实例化对象，参数分别是：要显示的列表数据，选择框的显示大小，是否以树状形式显示，是否显示层次码
var gbp_sl = new GBPSelectList("org", items, 10, 1, 1, "button");
var gbp_sl_my = new GBPSelectList("myorg", items, 10, 1, 0, "button");
var gbp_sl_list = new GBPSelectList("listorg", items, 10, 0, 0, "button");
</script>
<html>
<head>
<title>报告编制</title>
</head>
<body>
<form name="frmMain">
<table width="600px">
<tr bgcolor=#AAAA00>
<td>
<script>gbp_sl.make();</script>
</td>
</tr>
<tr bgcolor=#AAAA00>
<td>
<script>gbp_sl_my.make();</script>
</td>
</tr>
<tr bgcolor=#AAAA00>
<td>
<script>gbp_sl_list.make();</script>
</td>
</tr>
</table>
</form>
</body>
</html>
2.select.js
/*
-------------------------------------------------------------------------------
文件名称：select.js
说 明：JavaScript脚本，用于网页中涉及到选择时的控制,
版 本：1.0
修改纪录:
---------------------------------------------------------------------------
时间 修改人 说明
2004-8-11 zxl 创建
-------------------------------------------------------------------------------
*/
/*
用途：菜单配置页面中一级菜单被点击
输入: form对象
1.选中和单项选择一样，变颜色
2.没选中时则下级都不能选中
add by zbk
*/
function CA(CB){
if(CB.checked){
}else{
var frm=document.forms[0];
for (var i=0;i<frm.elements.length;i++)
{
var e=frm.elements[i];
if ( (e.type=='checkbox')&&
(CB.id.indexOf(e.id.substring(0,3))==0)&&e.disabled==false)
{
e.checked=false;
}
}
}
}
/*
用途：菜单配置页面中底级菜单项被点击
输入: form对象
1.对象选中则上级被选中，变颜色
2.对象没被选中则下级取消，变颜色
add by zbk
*/
function CCA(CB){//菜单配置页面中子菜单项被点击
if (CB==null) return;
var frm=document.forms[0];
if (CB.checked){
for (var i=0;i<frm.elements.length;i++)
{
var e=frm.elements[i];
if((e.type=='checkbox')&&(e.name=='menucheckbox')&&(CB.id.indexOf(e.id)==0)&&e.disabled==false)
{
e.checked=true;
}
}
}
else{
for (var i=0;i<frm.elements.length;i++)
{
var e=frm.elements[i];
if ( (e.type=='checkbox')&&
(e.id.indexOf(CB.id)==0)&&e.disabled==false)
{
e.checked=false;
}
}
}
}
/*
用途：如果只有一个选择框得到他的值
输入: chekname选择框对象名称
add by zbk
*/
function getselectedValue(chekname){
if (chekname==null) return '';
var length =0;
var i=0;
var count =0;
var frm=document.forms[0];
eles = frm.elements;
for (var i=0;i<frm.elements.length;i++)
{
obj= eles.item(i);
type = obj.attributes.item("type").nodeValue;
if(type == "checkbox" && obj.disabled==false &&obj.id!="selectAll" && obj.id==chekname && obj.checked){
return obj.value;
}
}
}
// 返回true表示选择，返回false表示没有选择
function selectedRadio(form){
var length =0;
var i=0;
eles = form.elements;
while( i<eles.length){
obj= eles.item(i);
type = obj.attributes.item("type").nodeValue;
if(type == "radio"){
if(obj.checked){
return true;
}
}
i++;
}
return false;
}
3.selectlist.js
/**
组件名称：
左右双向选择组件。
主要功能：
1> 提供两种风格-普通列表和树状列表。
2> 目前提供三个扩展函数
getSelectedValues： 获得选中的值，返回的是个包含节点编号的数组
getRows： 查看所有记录的详细信息，返回的是个包含节点对象的二维数组
getSelectedRows： 查看选中记录的详细信息，返回的是个包含节点对象的二维数组
备注说明：
树状风格时，选择上级会自动级联处理下级；选择下级则上级默认半选中；如果所有下级都选中，则上级选中。
一个页面只能使用一个组件（需要修改）
修改记录
2007-06-22
杨文彦
整理代码，添加注释，增加按钮样式
*/
/*==================== 组件对象代码 ====================*/
/*
1、构造方法
2、数据检查过滤方法
3、组件生成方法
4、选中/取消方法
5、全部选中/取消方法
6、页面数据显示方法*/
//构造函数
function GBPSelectList(nameSpace, items, size, isTreeStyle, isShowCode, ctrlStyle) {
this.multiple = true; //是否允许多选
this.listSize = size ? size : 20; //选择框的长度
this.isTreeStyle = Boolean(isTreeStyle); //是否用树状形式显示数据
this.isShowCode = Boolean(isShowCode); //如果是树状形式，是否显示层次码
this.ctrlStyle = ctrlStyle; //按钮样式
this.needOrder = true; //是否需要排序。（只在普通形式下起作用，树状时必须排序）
this.itemList = items; //存放所有选择元素的数组
this.leftSelect = null; //左边的选择框控件
this.rightSelect = null; //右边的选择框控件
this.leftDiv = null; //左边放置列表框的层
this.rightDiv = null; //右边放置列表框的层
this.leftDiv_innerHTML = ""; //左侧选择框层的内部元素，
this.rightDiv_innerHTML = ""; //右侧选择框层的内部元素
this.leftLabel = null; //左边的文字标签控件
this.rightLabel = null; //右边的文字标签控件
this.namespace = nameSpace; //控件名称的前缀
this.leftDivName = "divAll"; //左边放置列表框的层的名称
this.rightDivName = "divChecked"; //右边放置列表框的层的名称
this.leftSelectName = "sltAll"; //左边列表框的名称
this.rightSelectName = "sltChecked"; //右边列表框的名称
this.selectButton = "btnSelect"; //选中按钮的名称
this.selectAllButton = "btnSelectAll"; //选中所有按钮的名称
this.cancelButton = "btnCancel"; //取消选择按钮的名称
this.cancelAllButton = "btnCancelAll"; //取消所有按钮的名称
this.o_children = []; //一级节点列表
this.root = this; //根级节点-组件对象
this.nodes = {}; //存放所有节点
var o_this = this; //组件对象引用
this.buildNode = function(){ //处理组件显示数据，建立节点列表对象
if(this.isTreeStyle){
//构造树形显示风格
_build(o_this, 0);
}else{
//构造列表显示风格
for(var i = 0; i < this.itemList.length; i++){
new GBP_SL_Item(o_this, this.itemList[i]);
}
}
};
//在子类里迭代，是为了效率考虑。
function _build(father, level, start){
if(!start) start = 0;
for(var i = start; i < o_this.itemList.length; i++){
curLevel = o_this.itemList[i][4];
//是否属于本级节点
if(curLevel == (level + 1)){
var obj = new GBP_SL_Item(father, o_this.itemList[i]);
//继续下层递归
_build(obj, curLevel, i + 1);
}else if(curLevel <= level){
//结束本层递归
break;
}
}
}
}
//对数据进行检查、过滤、排序处理
GBPSelectList.prototype.prepareData = function() {
var list = new Array();
var arrays = this.itemList;
var _pre;
//按显示名排序
function _sortByName(a,b){
if(a[1] == b[1]) return 0
return (a[1] > b[1]) ? 1 : -1;
}
//按层次码排序
function _sortByTreeCode(a,b){
if(a[3] == b[3]) return 0
return (a[3] > b[3]) ? 1 : -1;
}
//检查数据是否完整，过滤不完整数据
for(var n = 0; n < arrays.length; n++){
var len = list.length;
//列表节点至少要求有两项数据
//树形节点至少要求有五项数据
if((!this.isTreeStyle && arrays[n].length >= 2) || (this.isTreeStyle && arrays[n].length >= 5)){
list[len] = arrays[n];
}
}
//排序
if(this.isTreeStyle){
list.sort(_sortByTreeCode);
}else if(this.needOrder){
list.sort(_sortByName);
}
//使用已经排序的节点列表替换原来未排序的节点列表
this.itemList = list;
}
//构造组件，并显示在页面上
GBPSelectList.prototype.make = function() {
//检查、过滤、排序数据
this.prepareData();
var txt , obj;
txt = "<table width='100%' height='100' border='0' align='center' cellpadding='0' cellspacing='0'>"
+ " <tr align='center'>"
+ " <td valign='top' width='30%'><div align='left' style='FONT-SIZE: 9pt;'>可用列表</div>"
+ " <div id='" + this.namespace + this.leftDivName + "'></div>"
+ " </td>"
+ " <td valign='middle' width='8%' >"
+ " <input type='button' name='" + this.namespace + this.selectButton + "' class='" + this.ctrlStyle + "' value=' > '><br><br>"
+ " <input type='button' name='" + this.namespace + this.selectAllButton + "' class='" + this.ctrlStyle + "' value=' >> '><br><br>"
+ " <input type='button' name='" + this.namespace + this.cancelButton + "' class='" + this.ctrlStyle + "' value=' < '><br><br>"
+ " <input type='button' name='" + this.namespace + this.cancelAllButton + "' class='" + this.ctrlStyle + "' value=' << '>"
+ " </td>"
+ " <td valign='top' width='30%'><div align='left' style='FONT-SIZE: 9pt;'>选择列表</div>"
+ " <div id='" + this.namespace + this.rightDivName + "' align='left'></div>"
+ " </td>"
+ " </tr>"
+ "</table>" ;
///生成对象
document.write(txt);
var oThis = this;
//关联控制对象
this.leftDiv = document.getElementById(this.namespace + this.leftDivName);
this.rightDiv = document.getElementById(this.namespace + this.rightDivName);
//关联按钮单击事件
obj = document.getElementById(this.namespace + this.selectButton);
obj.onclick = function() { oThis.doSelect(1) };
obj = document.getElementById(this.namespace + this.selectAllButton);
obj.onclick = function() { oThis.doAll(1) };
obj = document.getElementById(this.namespace + this.cancelButton);
obj.onclick = function() { oThis.doSelect(-1) };
obj = document.getElementById(this.namespace + this.cancelAllButton);
obj.onclick = function() { oThis.doAll(-1) };
//生成节点对象列表
this.buildNode();
//刷新页面显示
this.update();
};
//选中/取消选中
GBPSelectList.prototype.doSelect = function(isSelect) {
var values = new Array();
//处理哪个对象
var obj = (isSelect == 1) ? this.leftSelect : this.rightSelect;
//判断是否多选模式
if(this.multiple){
for(var i = 0; i < obj.options.length; i++){
if(obj.options[i].selected){
values[values.length] = obj.options[i].value;
}
}
}else{
if(obj.selectedIndex > -1){
values[0] = obj[obj.selectedIndex].value;
}
}
if( values.length == 0) return;
//处理下级节点
for(var n = 0; n < values.length; n++){
this.nodes[values[n]].doSelect(isSelect);
}
//刷新页面显示
this.update()
};
//全部选中/取消
GBPSelectList.prototype.doAll = function(isSelect) {
for(var i = 0; i < this.o_children.length; i++){
this.o_children[i].doSelect(isSelect);
}
this.update()
};
//更新select元素的界面显示
GBPSelectList.prototype.update = function(){
//用innerHTML来设置select元素，可以加快速度，减少屏幕闪烁
//给层元素赋初值
this.rightDiv_innerHTML = "<select name='" + this.namespace + this.rightSelectName + "' " + (this.multiple ? "multiple" : "") + " size='" + this.listSize + "' style='width:100%'>";
this.leftDiv_innerHTML = "<select name='" + this.namespace + this.leftSelectName + "' " + (this.multiple ? "multiple" : "") + " size='" + this.listSize + "' style='width:100%'>";
//处理子节点状态，根据子节点的状态设置父节点状态
for(var i = 0; i < this.o_children.length; i++){
this.o_children[i].doStatus();
}
//生成页面显示
for(var i = 0; i < this.o_children.length; i++){
this.o_children[i].update();
}
//直接用innerHTML，速度最快
this.leftDiv.innerHTML = this.leftDiv_innerHTML + "</select>";
this.rightDiv.innerHTML = this.rightDiv_innerHTML + "</select>";
//重新获取两侧select元素，并为其绑定双击事件
var oThis = this;
this.leftSelect = document.getElementById(this.namespace + this.leftSelectName);
this.leftSelect.ondblclick = function() { oThis.doSelect(1) };
this.rightSelect = document.getElementById(this.namespace + this.rightSelectName);
this.rightSelect .ondblclick = function() { oThis.doSelect(-1) };
};
/*==================== 节点对象代码 ====================*/
/*
1、构造方法
2、节点选择/取消方法
3、节点状态处理方法
4、节点页面显示实现方法*/
//节点对象
function GBP_SL_Item(o_parent, o_item){
this.father = o_parent; //上级节点引用
this.root = o_parent.root; //根级节点引用
this.o_children = []; //下级节点数组
this.info = o_item; //节点对象
this.status = o_item[2] ? 1 : -1 ; //节点是否默认选中标志
this.level = this.root.isTreeStyle ? o_item[4] : 1; //节点级次
this.value = o_item[0]; //节点编号
this.showText = o_item[1]; //节点显示名称
//根据定义处理显示名称格式
if(this.root.isShowCode)
// 是否显示层级编码
this.showText = this.showText + " - " + o_item[3];
if(this.level > 0)
//处理显示缩进
this.showText = "__________________".substr(0, (this.level - 1)).replace(/_/g, " ") + this.showText;
//加入父级节点的下级节点列表
o_parent.o_children[o_parent.o_children.length] = this;
//加入所有节点列表
this.root.nodes[this.value] = this;
}
//节点的选择函数
GBP_SL_Item.prototype.doSelect = function(isSelected){
this.status = isSelected;
//选择上级会自动选择其所有下级
for(var i = 0; i < this.o_children.length; i++){
this.o_children[i].doSelect(isSelected);
}
};
//递归处理指定节点及其下级节点状态
GBP_SL_Item.prototype.doStatus = function(){
//没有下级节点
if(this.o_children.length == 0) return this.status;
var selectedCount = 0, partSelectCount = 0, unselectedCount = 0;
var returnStatus = null;
for(var i = 0; i < this.o_children.length; i++){
//递归处理下级节点状态
returnStatus = this.o_children[i].doStatus();
if(returnStatus == 1) selectedCount += 1;
if(returnStatus == 0) partSelectCount += 1;
if(returnStatus == -1) unselectedCount += 1;
}
if(selectedCount > 0 && unselectedCount == 0 && partSelectCount == 0){
//下级全部选中
this.status = 1;
}else if(unselectedCount > 0 && selectedCount == 0 && partSelectCount == 0){
//下级一个都没选中
this.status = -1;
}else{
//下级部分选中
this.status = 0;
}
return this.status;
};
//更新界面显示
GBP_SL_Item.prototype.update = function(){
//status：1表示选中；0表示下级部分选中；-1表示未选
if(this.status == -1 || this.status == 0){
this.root.leftDiv_innerHTML += "<option value='" + this.value + "'>" + this.showText + "</option>\n";
}
if(this.status == 1 || this.status == 0){
this.root.rightDiv_innerHTML += "<option value='" + this.value + "'>" + this.showText + "</option>\n";
}
//递归处理下级节点
for(var i = 0; i < this.o_children.length; i++){
this.o_children[i].update();
}
};
/*==================== 组件扩展方法 ====================*/
//获得选中的值，返回的是个包含节点编号的数组
GBPSelectList.prototype.getSelectedValues = function() {
var values = new Array();
for(var n = 0; n < this.rightSelect.options.length; n++){
values[n] = this.rightSelect.options[n].value;
}
return values;
};
//查看右侧记录的详细信息，返回的是个包含节点对象的二维数组
GBPSelectList.prototype.getRows = function() {
var values = new Array();
for(var n = 0; n < this.rightSelect.options.length; n++){
values[values.length] = this.root.nodes[this.rightSelect.options[n].value].info;
}
return values;
};
//查看选中记录的详细信息，返回的是个包含节点对象的二维数组
GBPSelectList.prototype.getSelectedRows = function() {
var values = new Array();
for(var n = 0; n < this.rightSelect.options.length; n++){
if(this.rightSelect[n].selected)
values[values.length] = this.root.nodes[this.rightSelect.options[n].value].info;
}
return values;
};
分享到：
发表评论
-
js 操作frameset frame 对象
2010-08-30 16:43 1777框架编程概述一个HTML页面可以有一个或多个子框架，这些子框 ... -
js解密
2009-10-27 20:50 1189<script type="text/jav ... -
Javascript中eval函数的用法
2009-10-27 20:49 843JavaScript有许多小窍门来使编程更加容易。其中之一就是 ... -
Javascript Eval 函数详解1
2009-10-27 20:49 1345==============================E ... -
javascript 正则表达式祥解
2009-10-27 20:48 711正则表达式使用详解简 ... -
温故知新 javascript 正则表达式
2009-10-27 20:47 763很长时间没看 正则表达式了，碰巧今天用到，温故知新了一把 看书 ... -
子父窗口的操作,递归
2009-07-29 20:24 1156字符窗口操作： <html> <head ... -
js增加行
2008-09-27 17:10 2206<!DOCTYPE HTML PUBLIC " ... -
js层拖动
2008-09-16 09:14 1311<script> var x,y,z,down=f ... -
多form表单提交
2008-09-16 09:10 1638<script> function m ... -
加入收藏字体大小打印——收藏
2008-09-16 09:10 1188<SCRIPT language=JavaScript ... -
恢复上一次操作
2008-09-16 09:08 1031<script language="Jav ... -
javaScript 中call 函数的用法说明
2008-08-30 16:33 1045javaScript 中的 call() 是一个奇妙的方法，但 ... -
close Window
2008-08-07 18:01 1320----------------例子1------------ ... -
js使用小技巧
2008-07-04 17:15 11701.收藏时用图标显示 <link REL="S ... -
模态窗口和非模态窗口
2008-07-04 13:35 13893模态窗口和非模态窗口 ... -
HTML文档的节点
2008-06-21 14:24 1184DOM下，HTML文档各个节点被视为各种类型的Node对象。每 ... -
上传文件
2008-03-10 17:35 11051.test.htmn <script language ... -
父子页面的值传递
2008-03-10 16:20 16751 父子页面的值传递 两种方式： 1)在父页面可以通 ... -
模态窗口window.showModalDialog使用手册
2008-03-10 16:19 4673Window.Open()参数： <SCRI ...
相关推荐
由于小程序现有组件库silder无法双向选择稍加改动封装的组件
一个可双向滑块选择器的微信小程序组件double-sided-slider-master.zip
jquery双向选择器代
小程序双向滑动组件双向slider滑动微信小程序组件slider组件,配文地址：https://blog.csdn.net/ktucms/article/details/135077075
ppt简单讲解了vue的数据双向绑定以及介绍了组件化
电子政务-单纤双向光电组件.zip
父组件向子组件传值(双向数据传输),无需引入额外js，下载直接在浏览器中打开就可以浏览效果。 主要使用知识点自定义组件、$emit("function",arg)、props
网络游戏-单纤双向光组件、光模块和光网络设备.zip
基于.net TCP双向监听RMI组件Demo
父子组件之间的双向绑定非常简单，但是很多人因为是从Vue 2+开始使用的，可能不知道如何双向绑定，当然最简单的双向绑定（单文件中）就是表单元素的 v-model 了，例如 <input type=text /> 它会响应表单元素的...
关于前端开发框架vue中的v-model双向绑定自定义组件（第二版）
主要介绍了react 中父组件与子组件双向绑定问题，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
主要为大家详细介绍了Vue 3.0双向绑定原理的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue.js的双向移动端下拉加载更多组件
接下来通过本文给大家介绍vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法，具体详情如下所示： 父子组件通信，都是单项的，很多时候需要双向通信。方法如下： 1、父组件使用：msg.sync=aa 子组件...
自定义省市区三级选择器组件，直接将组件放入VUE3.0项目中components文件夹里引用即可，采用v-model进行数据双向绑定。
与同一应用的现有双向DC- - DC 转换器 ( ( BDC ) 模块相比， 最 新BDC模块具有高效率、高功率密度和隔离优势。这些优势让最新 BDC 有望满足高功率燃料电池、太阳能电池和电池应用的需求 ，满足他们对高功率密度、高...
vue自定义组件实现v-model双向绑定数据的实例代码 项目中会遇到自定义公共组件供项目调用，正常情况可以使用 props定义参数接收父组件传的参数，然后通过子组件的$emits()方法回传数据给父组件。 类似如下： 父...
Angular父子组件以及组件之间通讯示例代码.zip