您的位置：首页 > Web前端 > JQuery

通过jquery和js绑定下拉列表

2012-05-04 14:54 465 查看

为了避免数据库与前台页面的多次重复交互不必要查询，解决方法为，将DM表稳定数据绑定到js中，通过jquery将其绑定到前台下拉列表，这样就避免了和数据库的多次重复交互。

具体实现方法如下：

将数据库DM表生成js文件，此处以“性别表”为例

生成代码为C#

using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI.WebControls;
using System.IO;

public partial class Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindTable();

}
}

//绑定表
private void BindTable()
{
//查找所有基本代码表，以T_DM_为前缀
string strSQL = "select name from sysobjects where type='U' AND name LIKE '%T_DM_%' order by name";

DataSet DS = SqlHelper.ExecuteDataset(SqlHelper.ConnString, CommandType.Text, strSQL);

GridView1.DataSource = DS.Tables[0].DefaultView;
GridView1.DataBind();

DS.Dispose();
}
protected void Button1_Click(object sender, EventArgs e)
{
for (int i = 0; i < GridView1.Rows.Count; i++)
{
CheckBox myBox = (CheckBox)GridView1.Rows[i].FindControl("CheckBox1");
if (myBox.Checked)
{

string[] table = GridView1.DataKeys[i].Value.ToString().Split(new char[]{'_'});

string sql = "select name  from syscolumns  where (id = (select id from sysobjects  where (id = OBJECT_ID('" + GridView1.DataKeys[i].Value.ToString() + "'))))order by colid";

DataSet DS = SqlHelper.ExecuteDataset(SqlHelper.ConnString, CommandType.Text, sql);
//拼接sql语句
sql = "SELECT " + DS.Tables[0].Rows[0][0].ToString() + "," + DS.Tables[0].Rows[1][0].ToString() + " FROM " + GridView1.DataKeys[i].Value.ToString() + " ORDER BY " + DS.Tables[0].Rows[0][0].ToString();

DS = SqlHelper.ExecuteDataset(SqlHelper.ConnString, CommandType.Text, sql);

string result = "var "+table[2]+"_data={'0':{";

for (int j = 0; j < DS.Tables[0].Rows.Count; j++)
{
result += "'" + DS.Tables[0].Rows[j][0].ToString() + "':'" + DS.Tables[0].Rows[j][1].ToString() + "',";
}
result = result.Substring(0, result.Length - 1);

result += "}}";

string path = Server.MapPath("js_Data\\" + table[2] + ".js");

if (File.Exists(path))
{
File.Delete(path);
}

StreamWriter sr = File.CreateText(path);
sr.WriteLine(result);
sr.Close();

}
}
}
}

2. 生成到"js_Data"文件夹下“XB.js”文件

3. 导入jquery的2个js文件

http://115.com/file/c2l61v34

4. 以下是html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>示例文档</title>
<!--将jQuery引用进来-->
<script src=jquery-1.3.2.js type="text/javascript"></script>
<!--引用级联的下拉框框架-->
<script type="text/javascript" src="LinkageSelect.js"></script>
<!--引用js_Data文件-->
<script type="text/javascript" src="js_Data/XB.js"></script>

<script>
$(function() {
var myobj=eval('XB_data');
var options    = {
data:myobj
}
var sel = new LinkageSelect(options);
sel.bind('#XB .level_1');
//sel.bind('#XB .level_1','1');第二个参数为默认值
})
</script>

</head>
<body>
<div id="XB">
<select class="level_1" style="width:'+width+';"></select>
</div>
</body>
</html>

请注意：在实际应用中，笔者发现在thinkbox中使用该方法时加载时不显示，后经过讨论得出解决方法

<script>
$(function() {

setTimeout("jsLoad()",0);

})

function jsLoad()
{
$("p").toggle() ;
var myobj=eval('XBDM_data');
var options    = {
data:myobj
}
var sel = new LinkageSelect(options);
sel.bind('#MZ .level_1');
}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航