當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

datetimepicker 基础使用/select2 基础使用

發布時間：2025/3/14 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 datetimepicker 基础使用/select2 基础使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

?1.datetimepicker 日期控件，注意bootstrap的版本2和3對日期控件有不同class設置

minView:3,//最小選擇模式，0 分鐘，1小時， 2日， 3月，4年
maxView: 4,//最大選擇模式，0 分鐘，1小時， 2日， 3月，4年
startView: 3//初始化選擇視圖，0 分鐘，1小時， 2日， 3月，4年

}); </script>

2.select2,需要引用select2.js及css,下面的腳本是重新封裝了下select2的基本用法，通用性還有待改進，只為項目中減少重復代碼。

html頁面引用代碼如下：

<div class="col-lg-2 col-xs-6">
<div class="form-group">
<label>選擇品牌</label>
<select class="form-control select2 productlist" style="width:100%">
<option selected="selected" value=''>--請選擇品牌--</option>
</select>
</div>
</div>
<div class="col-lg-2 col-xs-6">
<div class="form-group">
<label>選擇品規</label>
<select class="form-control select2 skulist" style="width:100%">
<option selected="selected" value=''>--請選擇品規--</option>
</select>
</div>
</div>

引用的js內容如下：

//初始化級聯控件 var _kid = null;//父級kid var _geturl = "";//數據請求路徑 var _deftext = "--請選擇--";//默認文本，例如：--請選擇-- var _element = "";//綁定的控件 var _data = null; var getselect2 = function (kid, geturl, deftext, element) {if (deftext == "")deftext = _deftext;if (kid != null)_data="kid=" + kidvar selectlist = " <option value=''>" + deftext + "</option>";$.ajax({type: "get",url: geturl,dataType: "json",data: _data,contentType: false,processData: false,success: function (responsedata) {//返回值中必須包括Status//返回值的ResultData中必須包括kid,nameif (responsedata.Data.Status == 1) {var product = responsedata.Data.ResultData;$.each(product, function () {if (this.status == 0) {selectlist += "<option disabled='disabled' value=" + this.kid + ">" + this.name + "(不可用)</option>";}else {selectlist += "<option value=" + this.kid + ">" + this.name + "</option>";}});}element.children().remove();element.append(selectlist);element.select2(); //console.log($(".productlist").select2("val"));//獲取select2的選中value//console.log($(".skulist").select2("val"));//console.log($(".skulist").select2("data")[0].text); },error: function (msg) {alert("請求失敗！" + msg.responseText);}}); }

關于select2的其他API文檔，見：https://www.qdfuns.com/article/30225/1117f26e7aa6adbccca5d51d1c5b7196.html

select2 分頁功能,配合SQL分頁實現,返回給前端的JSON必須帶"id"。

前端js

1 //select2 帶分頁,返回的數據集，必須帶id字段，否則無法選擇 2 $(function () { 3 var pagesize = 10; 4 $(".form-group .hospitallist").select2({ 5 ajax: { 6 url: "sdm/GetHospitallist", 7 dataType: 'json', 8 delay: 500,//延遲500MS 9 data: function (params) { 10 return { 11 query: params.term, // 搜索內容，select2搜索框中的內容 12 page: params.page,//請求頁面id 13 row: pagesize,//每頁加載數量 14 citycode: $(".form-group .citys").select2("val")//城市編號,$(".form-group .citys").select2("val")對應select2控件的值 15 }; 16 }, 17 processResults: function (data, params) { 18 params.page = params.page || 1;//默認第一頁 19 params.row = params.row || pagesize;//設置每月加載數量 20 return { 21 results: data.Data.ResultData,//返回結果 22 pagination: { 23 more: (params.page * params.row) < data.Data.totalcount//返回條數小于總條數是，顯示加載更多 24 } 25 }; 26 }, 27 cache: true//允許緩存 28 }, 29 //國際化 30 language: { 31 // 您可以在構建中提供的語言文件中找到所有選項。它們都必須是返回應該顯示的字符串的函數。 32 // inputTooShort: function () {return "你必須輸入1個字符才可以查詢";}, 33 loadingMore: function () { return "加載更多..." }, 34 noResults: function () { return "沒有數據" } 35 }, 36 placeholder: '搜索', 37 escapeMarkup: function (markup) { return markup; }, 38 // minimumInputLength:0,//最小搜索觸發長度 39 templateResult: formatRepo, 40 templateSelection: formatRepoSelection 41 }); 42 //select2用戶自定義樣式 43 function formatRepo(repo) { 44 if (repo.loading) { 45 return "數據正在加載...."; 46 } 47 var itemup = ""; 48 if (repo.status == 0) { 49 itemup += "<option disabled='disabled' value=" + repo.id + ">" + repo.name + "(不可用)</option>"; 50 } 51 else { 52 itemup += "<option value=" + repo.id + ">" + repo.name + "</option>"; 53 } 54 var markup = "<div class='select2-result-repository clearfix'>"; 55 markup += "<div class='select2-result-repository__statistics'>" + 56 itemup + 57 "</div></div>"; 58 return markup; 59 } 60 //選擇完成，控件顯示的內容 61 function formatRepoSelection(repo) { 62 return repo.name || repo.text; 63 } 64 65 }); 前端分頁select2 代碼

后端代碼：C#

[HttpGet]public ActionResult GetHospitallist(){//默認分頁數據int count = 100;//默認每頁數量string query = ""; //查詢參數int page = 1;//起始頁string citycode = "";if (Request.QueryString["query"] != null)query = Request.QueryString["query"].ToString();if (Request.QueryString["page"] != null)page = Convert.ToInt32(Request.QueryString["page"].ToString());if (Request.QueryString["row"] != null)count = Convert.ToInt32(Request.QueryString["row"].ToString());if (Request.QueryString["citycode"] != null)citycode = Request.QueryString["citycode"].ToString();SDMAPI p = new SDMAPI();List<SelectModel> pl = p.GetHospitallist(count, page, query,citycode);ResultModel rm = new ResultModel();rm.Status = statuslist.成功;rm.ResultData = pl;rm.totalcount = pl.Count != 0 ? pl[0].totalcount : 0;JsonResult jr = new JsonResult();jr.Data = Json(rm);jr.JsonRequestBehavior = JsonRequestBehavior.AllowGet;return jr;} MVC [HttpPost]public List<SelectModel> GetHospitallist(int count, int page, string query,string citycode){string sql = "分頁SQL腳本 or 存儲過程";//自己寫吧SqlParameter p1 = new SqlParameter("@count", count);SqlParameter p2 = new SqlParameter("@page", page);SqlParameter p3 = new SqlParameter("@query", query);SqlParameter p4 = new SqlParameter("@citycode", citycode);SqlParameter[] parameters = { p1, p2, p3,p4 };DataSet ds = SQLHelper.SqlExecuteReader(sql, System.Data.CommandType.Text, "hehe", parameters);DataTable dt = ds.Tables[0];List<SelectModel> sm = ConvertToModel.ConvertDataTableToList<SelectModel>(dt);return sm;}

轉載于:https://www.cnblogs.com/daniel-niu/p/10271631.html

總結

以上是生活随笔為你收集整理的datetimepicker 基础使用/select2 基础使用的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： c#.net 获取时间日期年月日时分秒生
下一篇： [LOJ#6068]. 「2017 山东