EasyUI的combobox用法

? ? ? ? ? 在ITOO中有一個需求，前臺使用的是easyUI的框架，這里有幾個combobox下拉框，其中的內容都是可選的。

? ? ? ? ??當下拉框中的內容非常多的時候，用戶需要選擇其中的所有內容，然后，直接對選中的所有的下拉項進行操作，就需要添加一個全選的選項。

? ? ? ? ??方便用戶操作，這個全選的選項必須放到下拉框的第一項，而且，這幾個combobox控件默認的情況下，就是選中的全選選項。

? ? ? ? ??默認選中的就是全選非常的簡單，在頁面加載的時候，令該控件的值value等于全選即可。

<span style="font-size:24px;"><script type="text/javascript">//頁面初始化window.onload = function () {$('#ExamDate').datebox('setValue', formatterDate(new Date())); var date = $('#ExamDate').combobox('getValue');//清空考試時間$('#StartTime').combobox('loadData', {});//加載考試時間var url = "/InitExam/QueryExamTimeByDate?date=" + date;$('#StartTime').combobox({url: url,valueField: 'StartTime',textField: 'StartTime',value: "全選"});//清空考試名稱$('#ExamName').combobox('loadData', {});//加載考試名稱var url = "/InitExam/QueryExamNameByDate?date=" + date;$('#ExamName').combobox({url: url,valueField: 'ExamName',textField: 'ExamName',value: "全選"});} </script></span>

? ? ? ? ??從Controller返回到前臺View中的數據，使用的是Json串，給EasyUI組件的valueField和textField設置好字段之后，它就會自動的綁定Json串中key和value的值。

? ? ? ? ??Controller中的方法返回的是泛型，在轉換成Json串之前，先給它添加一項全選選項，為了讓全選在下拉的第一項顯示，必須先添加全選選項，然后再添加返回的泛型，最后，轉換成Json串返回到前臺。

<span style="font-size:24px;">public string QueryExamNameByDateTime(){string date = Request.QueryString["date"];string time = Request.QueryString["time"];List<v_examinformation> examinfomation = new List<v_examinformation>();examinfomation = examinfomationViewSerivceBll.QueryExamNameByDateTime(date, time);//添加全選List<v_examinformation> list = new List<v_examinformation>();v_examinformation cmb = new v_examinformation();cmb.ExamName = "全選";list.Add(cmb);for (int i = 0; i < examinfomation.Count; i++){v_examinformation combox = new v_examinformation();combox.ExamName = examinfomation[i].ExamName.ToString();list.Add(combox);}JavaScriptSerializer servializer = new JavaScriptSerializer();string strJson = servializer.Serialize(list);return strJson;} </span>

總結

以上是生活随笔為你收集整理的EasyUI的combobox用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。