listbox多选实现上下移动 js版和服务器版
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="X200906021128.aspx.cs" Inherits="ListBoxs_X200906021128" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function MoveUP(fElement)
{
if (fElement.options.length == 0 || fElement.options[0].selected) return;
for (var i = 1; i < fElement.options.length; i++)
{
if (fElement.options[i].selected)
{
var text = fElement.options[i].text;
var value = fElement.options[i].value;
var selected = fElement.options[i].selected; fElement.options[i].text = fElement.options[i - 1].text;
fElement.options[i].value = fElement.options[i - 1].value;
fElement.options[i].selected = fElement.options[i - 1].selected; fElement.options[i - 1].text = text;
fElement.options[i - 1].value = value;
fElement.options[i - 1].selected = selected;
}
}
} function MoveDown(fElement)
{
if (fElement.options.length == 0 || fElement.options[fElement.options.length - 1].Selected) return; for (var i = fElement.options.length - 1; i > -1; i--)
{
if (fElement.options[i].selected)
{
var text = fElement.options[i + 1].text;
var value = fElement.options[i + 1].value;
var selected = fElement.options[i + 1].selected; fElement.options[i + 1].text = fElement.options[i].text;
fElement.options[i + 1].value = fElement.options[i].value;
fElement.options[i + 1].selected = fElement.options[i].selected; fElement.options[i].text = text;
fElement.options[i].value = value;
fElement.options[i].selected = selected;
}
}
} </script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListBox ID="fListBox" runat="server" Height="200px" SelectionMode="Multiple" Width="200px"></asp:ListBox>
<br />
<br />
--- Server Side ------------------------------------------------------
<br />
<br />
<asp:Button ID="btnUp" runat="server" onclick="btnUp_Click" Text="Up" />
<asp:Button ID="btnDown" runat="server" onclick="btnDown_Click" Text="Down" />
<br />
<br />
--- Client Side ------------------------------------------------------
<br />
<br />
<input type="button" value="UP" onclick="MoveUP(document.getElementById('fListBox'));" />
<input type="button" value="Down" onclick="MoveDown(document.getElementById('fListBox'));" />
<br />
用 Ctrl + 鼠标 或 Ctrl + Shift 鼠标,实现多选或间断多选
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls; public partial class ListBoxs_X200906021128 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
for (int i = 0; i < 20; i++)
fListBox.Items.Add(i.ToString());
}
} protected void btnUp_Click(object sender, EventArgs e)
{
// 没有项,或第一个选中节点已经是第一项,则不处理
if (this.fListBox.Items.Count == 0 || this.fListBox.Items[0].Selected) return;
for (int i = 1; i < this.fListBox.Items.Count; i++)
{
if (this.fListBox.Items[i].Selected)
this.ChangeProperty(this.fListBox.Items[i - 1], this.fListBox.Items[i]);
}
} protected void btnDown_Click(object sender, EventArgs e)
{
// 没有项,或最后一个选中节点已经是第一项,则不处理
if (this.fListBox.Items.Count == 0 || this.fListBox.Items[this.fListBox.Items.Count - 1].Selected) return;
for (int i = this.fListBox.Items.Count-1; i >-1 ; i--)
{
if (this.fListBox.Items[i].Selected)
this.ChangeProperty(this.fListBox.Items[i], this.fListBox.Items[i+1]);
}
} private void ChangeProperty(ListItem fFront, ListItem fCurrent)
{
string fText = fFront.Text;
string fValue = fFront.Value;
bool fSelected = fFront.Selected; fFront.Text = fCurrent.Text;
fFront.Value = fCurrent.Value;
fFront.Selected = fCurrent.Selected; fCurrent.Text = fText;
fCurrent.Value = fValue;
fCurrent.Selected = fSelected;
}
}
listbox多选实现上下移动 js版和服务器版的更多相关文章
- Ubuntu桌面版与服务器版有什么不同?
提到安装Linux,Ubuntu可谓是最受欢迎的.为了满足每个人的需求,出现了不少版本或风格的Ubuntu;其中两项便是桌面版与服务器版.只要发布版本号一致,这两者从核心来说也就是相同的,唯 ...
- Ubuntu桌面版与服务器版的区别(转)
Ubuntu桌面版vs服务器版 提到安装Linux,Ubuntu可谓是最受欢迎的.为了满足每个人的需求,出现了不少版本或风格的Ubuntu:其中两项便是桌面版与服务器版.只要发布版本号一致,这两者从核 ...
- 微信支付开发(1) JS API支付V3版(转)
http://www.cnblogs.com/txw1958/p/wxpayv3-jsapi.html 本文介绍微信支付下的jsapi实现流程 前言 微信支付现在分为v2版和v3版,2014年9月10 ...
- ListBox复选框拓展
Toolkit的LongListMutiSelector的复选框功能,想必许多人都需要吧!然而系统本身控件ListBox虽然也有多选功能,可是外观上却缺乏复选框,选择效果只是颜色变化.于是在上一个项目 ...
- js操作文件 HTML5版
js操作文件 HTML5版,有需要的朋友可以参考下. <!DOCTYPE html> <html> <head> <title>JSFileReader ...
- 你不知道的 JS (系列丛书) - 第二版
你不知道的 JS (系列丛书) - 第二版 You Don't Know JS (book series) - 2nd Edition https://github.com/learning-js-b ...
- 使用 js 实现一个简易版的模版引擎
使用 js 实现一个简易版的模版引擎 regex (function test() { this.str = str; })( window.Test = ...; format() { let ar ...
- 使用 js 实现一个简易版的 drag & drop 库
使用 js 实现一个简易版的 drag & drop 库 具有挑战性的前端面试题 H5 DnD js refs https://www.infoq.cn/article/0NUjpxGrqRX ...
- 使用 js 实现一个简易版的动画库
使用 js 实现一个简易版的动画库 具有挑战性的前端面试题 animation css refs https://www.infoq.cn/article/0NUjpxGrqRX6Ss01BLLE x ...
随机推荐
- windows 下一个mysql password忘记改变
到场mysql简介 my.ini 于[mysqld]以下被加入 skip-grant-tables win+R 热键 进cmd 然后输入命令net stop mysql 最后一点,使文件夹mysql ...
- CSS的三种样式:内联式,嵌入式,外部式以及他们的优先级
从CSS 样式代码插入的形式来看基本能够分为下面3种:内联式.嵌入式和外部式三种. 1:内联式css样式表就是把css代码直接写在现有的HTML标签中,如以下代码: <p style=" ...
- cURL实现get、post请求
1.cURL介绍 cURL 是一个利用URL语法规定来传输文件和数据的工具,支持很多协议,如HTTP.FTP.TELNET等.最爽的是,PHP也支持 cURL 库.本文将介绍 cURL 的一些高级特性 ...
- QT全平台设置图标,全平台静态编译 good
1. 概述 当我们用QT写好了一个软件,要把你的程序分享出去的时候,不可能把编译的目录拷贝给别人去运行.编译好的程序应该是一个主程序,加一些资源文件,再加一些动态链接库,高大上一些的还可以做一个安装 ...
- myeclipse自动生成注释
myeclipse自动生成注释 在使用Eclipse编写Java代码时,自动生成的注释信息都是按照预先设置好的格式生成的,例如其中author的属性值. 我们可以在Eclipse中进行设置自己希望显示 ...
- BT基础知识简介
1. 蓝牙概述 无线局域网的通信 适用范围:10米到100米(根据发射功率的class不同有所差别,典型的class2为10m,而class1为100m,class3为1m) 应用: 局域网络 ...
- SuperSocket源码解析之消息处理
一 简述 Tcp消息的处理本身是与Tcp消息传输过程独立的,是消息的两个不同阶段,从前面的会话生命周期我们已经知道消息的传输主要有SocketSession实现,而真正处理则交由AppSession实 ...
- Storyboard中使用UIscrollView添加约束的开发总结
第一次在项目中用storyboard做界面,一般的界面直接添加约束非常爽快 然后有个界面有scrollview,添加了约束还总是出错 刚开始使用了 wCompact,hRegular,滑动出现问题,有 ...
- Android学习笔记:进度条ProgressBar的使用以及与AsyncTask的配合使用
ProgressBar时android用于显示进度的组件.当执行一个比较耗时的操作(如io操作.网络操作等),为了避免界面没有变化让用户体验降低,提供一个进度条可以让用户知道程序还在运行. 一.Pro ...
- JRE 和 JDK 的区别是什么?
JRE: Java Runtime Environment JDK:Java Development Kit JRE顾名思义是java运行时环境,包含了java虚拟机,java基础类库.是使用java ...