通过jquery和js绑定下拉列表东师理想

为了避免数据库与前台页面的多次重复交互不必要查询，解决方法为，将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+';"></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>

通过jquery和js绑定下拉列表 东师理想

通过jquery和js绑定下拉列表东师理想