市委组织部考核项目——获取多条数据并动态添加到下拉框上

       上一篇博客是欢哥让我做的难点，只是一个动态添加，删除行的效果，还没有涉及到获取其中的值保存到数据中。这篇博客主要通过动态添加的多行介绍与与一般处理交互实现采用回调函数获取多条数据,还是用例子说话吧,有时候说一些原理还不如拿个例子来理解,前提一定要有一定的基础做铺垫

        同样还是先来了解一下我的界面

                     

 

        这个界面虽然不华丽但是功能我认为挺实用的,一个是我圈起来的那个下拉框,,一个是我圈起来的保存按钮,先来说下拉框,它里边的内容是根据选择的年份和用户的信息去数据库查询出来的,而且是动态添加到下拉框的,这里就使用 了前面提到的回调函数,通过它将查询出的内容返回的界面,下面是那两个下拉框的代码,主要让大家了解他们的id值，后面我会根据这两个id去获取数据,还有一个隐藏控件,通过它的value值一般处理程序执行相应的方法

    <div id="Inquire">
        <span style="font-size: 18px;">      年份:</span>
        <select id="year" name="year" style="width: 180px;">
            <option value="defaultyear"></option>
        </select>      
        <span style="font-size: 18px;"> 指标类型:</span>
        <select id="targetstyle" name="targetstyle" style="width: 200px;">
        </select>
    </div>
//隐藏控件
<input type="hidden" id="test" name="test" />

js部分

 function InquireTargetStyle{
            //通给隐藏控件的value赋值向一般处理程序中找到相应的方法
            document.getElementById("test").value = "queryStyle";
            var test = document.getElementById("test").value;
            $.post("SubmitTargetJob.ashx", { action: "post", jsonArray: "" + test + "" }, function (data) {
                for (i = 0; i < data.length; i++) {
                    var x = document.getElementById("targetstyle");
                    $("<option value='" + data[i] + "'>" + data[i] + "</option>").appendTo(x);
                }
            }, "json");
        }

代码解释

       大家请看$.post部分，test是我需要往一般处理程序中传的值，在一般处理程序会接受到test的value值，然后根据它去执行相应的方法，再看function的参数data，它就是回调函数，将我查询出来的数据返回到界面，还有下面的for循环，它是将查询出的多条数据一个一个的绑定到下拉框上

一般处理程序部分

public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string command = context.Request["jsonArray"].ToString();//前台传的标示值
            
            if (command == "creat") {
                creatTarget(context);
            }
            else if (command == "queryStyle") {
                queryStyle(context);
            }
        }

代码解释

         context.Request["jsonArray"].ToString()是一般处理程序接受前面传来的值,通过对接收的值判断执行的方法,此例执行queryStyle方法

public void queryStyle(HttpContext context)
        {
           DataSet ds= unitQuantifyTargetBll.GetList();
           List<String> arr = new List<String>();

           for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
           
               {
                   arr.Add(ds.Tables[0].Rows[i][0].ToString().Trim());
               }
           
           arr.Add("编辑");
           
            //json序列化
           String data = JsonConvert.SerializeObject(arr.ToArray());
          //将数据返回到前面
           context.Response.Write(data);
          
        }

代码解释:

        此方法是通过GetList方法进行的查询,

 /// <summary>
        /// 获得指标类型
        /// </summary>
        public DataSet GetList()
        {
            return dal.GetStyle();
        }

代码解释

       执行GetStyle方法的执行

  /// <summary>
        /// 获得指标类型
        /// </summary>
        public DataSet GetStyle()
        {
            StringBuilder strSql = new StringBuilder();
            strSql.Append("select distinct(Type)");
            strSql.Append(" FROM T_UnitQuantifyTarget ");
            return DbHelperSQL.Query(strSql.ToString());
        }

        这是通过回调函数获取数据并将其动态添加到下拉框的整个过程,希望对你的理解有所帮助,下一篇博客将对多条数据的提交做详细的介绍