1：客户端页面构建
数据呈现是js动态构建div来显示的 采用ajax方式加载
var Selector = {
CacheList: new Array(),
setCacheData: function(cacheName, cacheValue) {
this.CacheList.push({ CacheName: cacheName, CacheValue: cacheValue });
},
getCacheData: function(cacheName) {
for (var i = 0; i < this.CacheList.length; i++) {
if (this.CacheList[i].CacheName == cacheName) {
return this.CacheList[i].CacheValue;
}
}
return null;
},
Delete: function(index) {
if (index < 0 || index > this.CacheList.length) return;
this.CacheList.splice(index, 1);
},
removeCache: function(cacheName) {
for (var i = 0; i < this.CacheList.length; i++) {
if (this.CacheList[i].CacheName == cacheName) {
this.Delete(i);
break;
}
}
},
Width: function() { return Math.max(document.body.scrollWidth, document.body.offsetWidth) - (document.body.offsetWidth - document.body.scrollWidth); },
Height: function() { return Math.max(document.body.scrollHeight, document.body.offsetHeight); },
initialize: function(WindowOptions, QueryOptions, Controls) {
this.closeSelector();
var w = this.createWindow(WindowOptions);
this.createTitle(w, WindowOptions.TitleName);
this.createContent(w, QueryOptions);
this.setCacheData("AJaxControls", Controls); //传入控件集合 自动对控件赋值
},
closeSelector: function() {
var w = this.getCacheData("Selector");
if (w != null) {
document.body.removeChild(w);
this.removeCache("Selector");
this.removeCache("ajaxPagerInfo");
}
},
convertToJsonObject: function(jsonString) {
if (jsonString == "") return jsonString;
var fun = new Function("return " + jsonString + "");
return fun();
},
processRequest: function(data) {
data = Selector.convertToJsonObject(data);
if (data.Error) {
window.alert(data.Error);
return;
}
var c = Selector.getCacheData("Selector");
c = c.getElementsByTagName("div")[1];
c.innerHTML = "";
c.appendChild(Selector.createSelect(data.Keys)); //查詢條件
c.appendChild(Selector.createPageContent(data.PagerContent)); //顯示內容
c.appendChild(Selector.createSelectPager(parseInt(data.PageIndex), parseInt(data.PageCount), parseInt(data.TotalRecord))); //分頁
},
createWindow: function(Options) {
var w = document.createElement("div");
document.body.appendChild(w);
var width = (Options.Width || this.Width()), height = (Options.Height || this.Height()), top = Options.Top || 0, left = Options.Left || 0, bodyWidth = this.Width(), bodyHeight = this.Height(); ;
if (Options.SelectButton) {
var p = this.getPosition(Options.SelectButton);
top = p.Top;
left = p.Left;
if (Options.Width) {
if (parseInt(left) > bodyWidth / 2) {
left = Math.abs(parseInt(left) - parseInt(Options.Width));
}
else {
left = parseInt(left) + parseInt(Options.SelectButton.offsetWidth);
}
}
if (Options.Height) {
if (parseInt(top) > bodyHeight / 2) {
if (parseInt(Options.Height) > bodyHeight) {
top = 0;
}
else {
top = Math.abs(parseInt(top) - parseInt(Options.Height)) + parseInt(Options.SelectButton.offsetHeight);
}
}
}
}
w.style.cssText = "position:absolute;border:solid 1px #24B1EC;z-Index:2000;overflow:auto;background-color:#fff;width:" + width + "px;height:" + height + "px;top:" + top + "px;left:" + left + "px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);";
this.setCacheData("Selector", w);
return w;
},
createTitle: function(parenWindow, titleName) {
var t = document.createElement("div"); //#3977B5
t.style.cssText = "width:100%;height:20px;background-color:#24B1EC;cursor:default";
var titleText = document.createElement("span");
titleText.style.cssText = "float:left;color:#fff;width:95%;cursor:move";
titleText.innerText = titleName;
titleText.onmousedown = function() {
Selector.drag(parenWindow);
}
var close = document.createElement("span");
close.style.cssText = "float:right;cursor:pointer;color:#fff";
close.innerHTML = "X";
close.title = "關閉";
close.onclick = function() {
Selector.closeSelector();
}
t.appendChild(titleText);
t.appendChild(close);
parenWindow.appendChild(t);
},
createContent: function(parenWindow, queryOptioins) {
var c = document.createElement("div");
c.style.cssText = "width:100%";
parenWindow.appendChild(c);
this.ajaxPager({ QueryOptions: queryOptioins }, this.processRequest);
},
createSelect: function(selectObject) {
var select = document.createElement("div");
var ddlSelectKeyWord = document.createElement("select");
var ajaxPagerInfo = this.getCacheData("ajaxPagerInfo");
for (var item in selectObject) {
var o = new Option(selectObject[item], item);
if (ajaxPagerInfo.QueryOptions.SearchKey) {
if (ajaxPagerInfo.QueryOptions.SearchKey == item) {
o.selected = true;
}
}
ddlSelectKeyWord.options.add(o);
}
select.appendChild(ddlSelectKeyWord);
var txtKeyWord = document.createElement("input");
txtKeyWord.setAttribute("type", "text");
var btnSearch = document.createElement("input");
btnSearch.setAttribute("type", "button");
btnSearch.value = "查詢";
btnSearch.onclick = function() {
var queryOptions = ajaxPagerInfo.QueryOptions;
var sk = ddlSelectKeyWord.value, sv = txtKeyWord.value;
if (sv != "") {
if (!queryOptions.SearchKey) {
queryOptions.SearchKey = "";
}
if (!queryOptions.SearchValue) {
queryOptions.SearchValue = "";
}
queryOptions.SearchKey = sk;
queryOptions.SearchValue = sv;
Selector.setCacheData("ajaxPagerInfo", ajaxPagerInfo);
Selector.goToPage(1, Selector.processRequest);
}
}
var btnSure = document.createElement("input");
btnSure.setAttribute("type", "button");
btnSure.value = "確定";
btnSure.onclick = function() {
var parenWindow = Selector.getCacheData("Selector");
var tb = parenWindow.getElementsByTagName("table")[0];
var ret = [], item, row;
for (var i = 1; i < tb.rows.length; i++) {
var chk = tb.rows[i].cells[0].firstChild.checked;
if (chk == true) {
row = tb.rows[i];
item = [];
for (var j = 1; j < row.cells.length; j++) {
item.push(row.cells[j].innerText);
}
ret.push(item);
}
}
if (ret.length > 0) {
var controls = Selector.getCacheData("AJaxControls");
if (controls != null) {
for (var n = 0; n < controls.length; n++) {
if (ret[n]) {
Selector.setControlValue(controls[n], ret[n]);
}
}
} }
Selector.closeSelector();
}
select.appendChild(txtKeyWord);
select.appendChild(btnSearch);
select.appendChild(btnSure);
return select;
},
createSelectPager: function(pageIndex, pageCount, totalRecord) {
var selectPage = document.createElement("div");
selectPage.style.cssText = "FONT-SIZE: 9pt; WIDTH: 100%; COLOR: #3E94F1; TEXT-ALIGN: center;";
var m = "cursor:pointer;color:#fff;background-color:#3E94F1", o = "cursor:pointer;color:#3E94F1;background-color:#fff";
var first = document.createElement("span");
first.innerText = "首頁";
first.onmouseover = function() { first.style.cssText = m; }
first.onmouseout = function() { first.style.cssText = o; }
var previous = document.createElement("span");
previous.innerText = "上一页";
previous.onmouseover = function() { previous.style.cssText = m; }
previous.onmouseout = function() { previous.style.cssText = o; }
var next = document.createElement("span");
if (pageIndex > 1) {
first.onclick = function() { Selector.goToPage(1, Selector.processRequest); }
previous.onclick = function() { Selector.goToPage(pageIndex - 1, Selector.processRequest); }
}
next.innerText = "下一页";
next.onmouseover = function() { next.style.cssText = m; }
next.onmouseout = function() { next.style.cssText = o; }
var last = document.createElement("span");
last.innerText = "尾页";
last.onmouseover = function() { last.style.cssText = m; }
last.onmouseout = function() { last.style.cssText = o; }
if (pageIndex < pageCount) {
next.onclick = function() { Selector.goToPage(pageIndex + 1, Selector.processRequest); }
last.onclick = function() { Selector.goToPage(pageCount, Selector.processRequest); }
}
var total = document.createElement("span");
total.innerHTML = "當前第<font color=\"red\">" + pageIndex + "</font>頁共<font color=\"red\">" + pageCount + "</font>頁<font color=\"red\">" + totalRecord + "</font>條數據";
selectPage.appendChild(first);
selectPage.appendChild(previous);
selectPage.appendChild(next);
selectPage.appendChild(last);
selectPage.appendChild(total);
return selectPage;
},
createPageContent: function(pagerContent) {
var tb = document.createElement("table");
tb.style.cssText = "width:100%;border-collapse:collapse";
tb.border = "1";
tb.cellPadding = "0";
tb.cellSpacing = "0";
var row = null, header, cell;
header = pagerContent[0];
row = tb.insertRow(0);
row.style.cssText = "color:#fff;background-color:#006699;font-weight:bold;font-size:10pt";
cell = row.insertCell();
var chkAll = document.createElement("input");
chkAll.setAttribute("type", "checkbox");
chkAll.onclick = function() {
Selector.selectAll(chkAll);
}
cell.appendChild(chkAll);
for (var h in header) {
cell = row.insertCell();
cell.innerText = h;
}
for (var i = 0; i < pagerContent.length; i++) {
row = tb.insertRow(i + 1);
cell = row.insertCell();
var chkSingle = document.createElement("input");
chkSingle.setAttribute("type", "checkbox");
chkSingle.onclick = function(i) { return function() { var el = this; el.style.backgroundColor = el.checked ? "red" : ""; } } (i)
cell.appendChild(chkSingle);
for (var column in pagerContent[i]) {
cell = row.insertCell();
cell.innerText = pagerContent[i][column];
}
row.onmouseover = function(i) { return function() { var el = this; el.style.backgroundColor = "#3E94F1"; } } (i);
row.onmouseout = function(i) { return function() { var el = this; el.style.backgroundColor = ""; } } (i);
}
return tb;
},
show: function(WindowOptions, QueryOptions, Controls) {
this.initialize(WindowOptions, QueryOptions, Controls);
},
drag: function(obj) {
obj.setCapture();
var OriginalPosition = { Top: (window.event.clientY - parseInt(obj.style.top)), Left: (window.event.clientX - parseInt(obj.style.left)) };
document.onmouseup = function() {
if (obj == null) { return; }
obj.releaseCapture();
obj = null;
}
document.onmousemove = function(e) {
if (obj == null) return;
if (!e) { e = event; }
obj.style.top = e.clientY - OriginalPosition.Top;
obj.style.left = e.clientX - OriginalPosition.Left;
}
},
getSelectIndex: function(select, selectValue) {
for (var j = 0; j < select.options.length; j++) {
if (select.options[j].value == selectValue) { return j; }
}
return 0;
},
getPosition: function(e) { /*獲取元素的絕對位置*/
var left = 0, top = 0;
if (e.getBoundingClientRect) {
var pos = e.getBoundingClientRect();
left = pos.left + document.body.scrollLeft;
top = pos.top + document.body.scrollTop;
return { Left: left, Top: top }
}
else {
while (e.offsetParent) {
left += e.offsetLeft;
top += e.offsetTop;
e = e.offsetParent;
}
return { Left: left, Top: top }
}
},
setControlValue: function(controls, retVal) {
if (controls == null) return;
var sValue, ctrl;
for (var i = 0; i < controls.length; i++) {
ctrl = typeof controls[i] == "string" ? document.getElementById(controls[i]) : controls[i];
if (!ctrl) continue;
sValue = retVal[i] || "";
switch (ctrl.type) {
case "text":
ctrl.value = sValue;
break;
case "select-one":
ctrl.selectedIndex = this.getSelectIndex(ctrl, sValue);
break;
default:
ctrl.innerText = sValue;
break;
}
}
},
formatSql: function(sql) {
if (!sql) return "";
var item = [];
for (var s in sql) {
item.push(s + ":" + sql[s]);
}
return item.join(",");
},
selectAll: function(obj) {
var tb = obj.offsetParent.offsetParent;
for (var i = 1; i < tb.rows.length; i++) {
for (var j = 0; j < tb.rows[i].cells.length; j++) {
for (var k = 0; k < tb.rows[i].cells[j].childNodes.length; k++) {
if (tb.rows[i].cells[j].childNodes[k].type == "checkbox") {
tb.rows[i].cells[j].childNodes[k].checked = obj.checked;
}
}
}
}
},
ajaxPager: function(Options, processRequest) {
this.setCacheData("ajaxPagerInfo", Options);
this.goToPage((Options.QueryOptions.PageIndex || "1"), processRequest);
},
goToPage: function(pageIndex, processRequest) {//debugger
var ajaxPagerInfo = this.getCacheData("ajaxPagerInfo");
var queryOptions = ajaxPagerInfo.QueryOptions
var queryWhere = this.formatSql(queryOptions.QueryWhere) || "", queryCode = queryOptions.QueryCode, pageSize = 10, orderBy = this.formatSql(queryOptions.OrderBy) || "", searchKey = queryOptions.SearchKey || "", searchValue = queryOptions.SearchValue || "";
var sendData = "QueryCode=" + queryCode + "&PageIndex=" + pageIndex + "&PageSize=" + pageSize + "&QueryWhere=" + queryWhere + "&OrderBy=" + orderBy + "&SearchKey=" + searchKey + "&SearchValue=" + searchValue + "";
var url = "Handler1.ashx?num=" + Math.random();
this.send("POST", url, sendData, true, processRequest);
},
getXmlHttp: function() {
var x = this.getCacheData("xmlHttp");
if (x == null) {
x = new ActiveXObject("Microsoft.XMLHTTP");
this.setCacheData("xmlHttp", x);
}
return x;
},
send: function(bstrMethod, bstrUrl, pdata, varAsync, processRequest) {
var xmlHttp = this.getXmlHttp();
xmlHttp.open(bstrMethod, bstrUrl, varAsync);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.Status == 200) {
processRequest(xmlHttp.responseText);
}
else {
alert("error:" + xmlHttp.statusText);
}
}
}
if (bstrMethod == "POST") {
xmlHttp.setRequestHeader("Content-Length", pdata.length);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Connection", "close");
xmlHttp.send(pdata);
}
else {
xmlHttp.send(null);
}
}
}
2:服务端的数据处理
建立一个 Handler1.ashx
数据取自Sql2000 的NorthWind 分页用系统自带的分页存储过程
没有什么复杂的逻辑代码也很简单 就没有加注释
using System;
using System.Web;
using System.Data.SqlClient;
using System.Data;
using System.Text;
namespace Selector
{
/// <summary>
/// $codebehindclassname$ 的摘要描述
/// </summary>
public class DataBase
{
/*
分頁存儲過程
CREATE procedure Pro_SelectPage
@sqlstr nvarchar(4000),
@currentpage int,
@pagesize int
as
set nocount on
declare @P1 int,
@rowcount int
set @sqlstr=replace(replace(replace(replace(replace(replace(replace(replace(@sqlstr,'exec ',''),'insert ',''),'delete ',''),'update ',''),'drop ',''),'alter ',''),'chr(',''),'mid(','')
exec sp_cursoropen @P1 output ,@sqlstr,@scrollopt=1,@ccopt=1,@rowcount=@rowcount output
select ceiling(1.0*@rowcount/@pagesize) as PageCount,@rowcount as RCount --,@rowcount as ?行?,@currentpage as ?前?
set @currentpage=(@currentpage-1)*@pagesize+1
exec sp_cursorfetch @P1,16,@currentpage,@pagesize
exec sp_cursorclose @P1
set nocount off
GO
*
*/
private SqlCommand cmd = null;
public DataBase() { cmd = new SqlCommand(); }
public void AddInParameter(string parameterName, object parameterValue, SqlDbType sqlDbType) {
SqlParameter parameter = new SqlParameter();
parameter.ParameterName = parameterName;
parameter.SqlDbType = sqlDbType;
parameter.Value = parameterValue;
parameter.Direction = ParameterDirection.Input;
cmd.Parameters.Add(parameter);
}
public System.Data.DataSet ExecuteDataSet(System.Data.CommandType commandType, string commandText) {
using (System.Data.SqlClient.SqlConnection conn = new System.Data.SqlClient.SqlConnection("server=.;database=northwind;uid=sa;pwd=000000")) {
cmd.Connection = conn;
cmd.CommandType = commandType;
cmd.CommandText = commandText;
System.Data.SqlClient.SqlDataAdapter dapter = new System.Data.SqlClient.SqlDataAdapter(cmd);
System.Data.DataSet ds = new System.Data.DataSet();
dapter.Fill(ds);
return ds;
}
}
}
public class Common
{
DataBase db = new DataBase();
public DataSet GetPageData(int pageIndex, int pageSize, string commandText) {
db.AddInParameter("@sqlstr", commandText, SqlDbType.NVarChar);
db.AddInParameter("@currentpage", pageIndex, SqlDbType.Int);
db.AddInParameter("@pagesize", pageSize, SqlDbType.Int);
DataSet ds = db.ExecuteDataSet(CommandType.StoredProcedure, "Pro_SelectPage");
if (ds.Tables[2].Columns.Contains("rowstat")) {
ds.Tables[2].Columns.Remove("rowstat");
}
return ds;
}
}
public class Handler1 : IHttpHandler
{
private string ConvertToJson(System.Data.DataTable dt) {
System.Text.StringBuilder retVal = new System.Text.StringBuilder();
retVal.Append("[");
int RowCount = 0, ColumnCount = 0;
foreach (DataRow row in dt.Rows) {
RowCount++;
retVal.Append("{");
foreach (DataColumn column in dt.Columns) {
ColumnCount++;
retVal.AppendFormat("'{0}':'{1}'{2}", column.ColumnName, (row[column].ToString().Replace(System.Environment.NewLine,"\\r\\n").Replace("'","\\'").Replace("\"","\\\"")), ColumnCount == dt.Columns.Count ? "" : ",");
}
ColumnCount = 0;
retVal.Append("}");
retVal.AppendFormat("{0}", RowCount == dt.Rows.Count ? "" : ",");
}
retVal.Append("]");
return retVal.ToString();
}
private string ConvertToJson(DataSet ds) {
StringBuilder retVal = new StringBuilder();
int TableCount = 0;
foreach (DataTable dt in ds.Tables) {
TableCount++;
retVal.Append(dt.TableName + ":");
retVal.Append(ConvertToJson(dt));
retVal.Append(TableCount == ds.Tables.Count ? "" : ",");
}
if (retVal.Length > 0) {
retVal.Insert(0, "{");
retVal.Append("}");
}
return retVal.ToString();
}
private int PageIndex {
get { return this.Request.Form["PageIndex"] == null ? 1 : int.Parse(this.Request.Form["PageIndex"]); }
}
private int PageSize {
get { return this.Request.Form["PageSize"] == null ? 10 : int.Parse(this.Request.Form["PageSize"]); }
}
private string _commandText;
private string CommandText {
get {
return string.Format("{0} {1} {2} ", this._commandText, this.QueryWhere + this.GetSearchWhere, this.OrderBy);
}
set { this._commandText = value; }
}
private string QueryCode {
set {
string q = value;
switch (q) {
case "001":
this.CommandText = @"SELECT OrderID, CustomerID, EmployeeID, OrderDate,ShipCity FROM Orders where 1=1 ";
this.Keys = "OrderID:訂單編號;CustomerID:客戶編號;EmployeeID:員工;OrderDate:訂單日期";
break;
case "002":
this.CommandText = @"SELECT ProductName, SupplierID, QuantityPerUnit, CategoryID, UnitPrice FROM Products where 1=1 ";
this.Keys = "ProductName:產品名稱;SupplierID:廠商";
break;
}
}
}
private string QueryWhere {
get {
string q = this.Request.Form["QueryWhere"];
if (string.IsNullOrEmpty(q)) { return string.Empty; }
string[] items = q.Split(',');
string sql = string.Empty;
for (int i = 0; i < items.Length; i++) {
sql += string.Format(" and {0}='{1}' ", items[i].Split(':')[0], items[i].Split(':')[1]);
}
return sql;
}
}
private string OrderBy {
get {
string q = this.Request.Form["OrderBy"];
if (string.IsNullOrEmpty(q)) { return string.Empty; }
string[] items = q.Split(',');
string sql = string.Empty;
for (int i = 0; i < items.Length; i++) {
sql += string.Format(" {0} {1} {2} ", items[i].Split(':')[0], items[i].Split(':')[1] == "0" ? "asc" : "desc", i == items.Length-1 ? "" : ",");
}
return string.Format("{0} {1} ",sql.Equals(string.Empty) ? "" : " order by ", sql);
}
}
private string GetSearchWhere {
get {
if (string.IsNullOrEmpty(this.SearchKey) || string.IsNullOrEmpty(this.SearchValue)) return string.Empty;
return string.Format(" and {0} like '%{1}%' ", this.SearchKey, this.SearchValue);
}
}
private string SearchKey {
get {
return this.Request.Form["SearchKey"];
}
}
private string SearchValue {
get {
return this.Request.Form["SearchValue"];
}
}
private string _keys;
private string Keys {
get {
string[] key = this._keys.Split(';');
StringBuilder s = new StringBuilder();
s.Append("{");
for (int i = 0; i < key.Length; i++) {
s.AppendFormat("\"{0}\":\"{1}\"{2}", key[i].Split(':')[0], key[i].Split(':')[1], i.Equals(key.Length - 1) ? "" : ",");
}
s.Append("}");
return s.ToString();
}
set { this._keys = value; }
}
private string GetAjaxPager(DataSet ds, int pageIndex, string keys) {
int totalRecord = Convert.ToInt32(ds.Tables[1].Rows[0][1]), pageCount = Convert.ToInt32(ds.Tables[1].Rows[0][0]);
return "{\"PagerContent\":" + ConvertToJson(ds.Tables[2]) + ",\"PageCount\":\"" + pageCount + "\",\"PageIndex\":\"" + pageIndex + "\",\"TotalRecord\":\"" + totalRecord + "\",\"Keys\":" + keys + "}";
}
public string ErrorFormat(string error) {
return string.Format("{0}Error:\"{1}\"{2}", "{", error.Replace(System.Environment.NewLine, "\\n\\r").Replace("'", "\\'").Replace("\r", "\\r").Replace("\n", "\\n").Replace("\"", "\\\""), "}");
}
HttpResponse Response;
HttpRequest Request;
public void ProcessRequest(HttpContext context) {
this.Response = context.Response;
this.Request = context.Request;
this.Response.Clear();
this.Response.ClearContent();
this.Response.ClearHeaders();
this.Response.ContentEncoding = System.Text.Encoding.UTF8;
string msg = string.Empty;
try {
this.QueryCode = this.Request.Form["QueryCode"];
Common com = new Common();
DataSet ds = com.GetPageData(this.PageIndex, this.PageSize, this.CommandText);
Response.Write(GetAjaxPager(ds, this.PageIndex, this.Keys));
}
catch (Exception ex) {
Response.Write(ErrorFormat(ex.Message));
}
}
public bool IsReusable {
get {
return false;
}
}
}
}
3：调用
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Selector._Default" %>
<!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 language="javascript" type="text/javascript" src="Selector2.js"></script>
<script language="javascript" type="text/javascript">
function SelectValue(obj) {
Selector.show({ Width: 800, Height: 400, TitleName: "選擇訂單", SelectButton: obj },
{ QueryCode: '001', QueryWhere: {}, OrderBy: { "OrderDate": "1"} },
[["txtName1", "txtName2", "txtName3"]]
);
}
function SelectValue2(obj) {
Selector.show({ Width: 600, Height: 300, TitleName: "選擇訂單", SelectButton: obj },
{ QueryCode: '002', QueryWhere: {}, OrderBy: { "SupplierID": "1"} },
[["txtName1", "txtName2", "txtName3"]]
);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" value="選擇" οnclick="SelectValue(this)" />
<br />
<input type="button" value="選擇2" οnclick="SelectValue2(this)" />
<input type="text" id="txtName1" name="txtName1" />
<input type="text" id="txtName2" name="txtName2" />
<input type="text" id="txtName3" name="txtName3" />
</div>
</form>
</body>
</html>
4:效果图
目前只支持ie
93
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
