1.datetimepicker 日期控件,注意bootstrap的版本2和3对日期控件有不同class设置
<link href="Content/themes/datetimepicker/datetimepicker.css" rel="stylesheet" /> <script src="scripts/datetimepicker/bootstrap-datetimepicker.js"></script> <div class="col-md-1 "> <div class="input-group date form_datetime"> 选择日期: <input size="16" type="text" value="" readonly> <span class="input-group-addon"> <i class="glyphicon glyphicon-th"></i> </span> </div> </div>
<script> //日历控件 。国际化,可以直接修改 dates里面对应数据 //class 在bootstrap 2和3下面会有区别,需要严格按照示例中写,否则会造成 控件加载错误,而页面无法捕捉到错误!本例子使用bootstrap 3.3.7 $(".form_datetime").datetimepicker({ format: "yyyy-mm-dd", //日期格式 yyyy-mm-dd hh:ii autoclose: true, //选择日期后,自动关闭 todayBtn: true, //显示今天 按钮 //pickerPosition: "bottom-right",//日期控件弹出位置 startDate: "2019-01-14 10:00", //开始日期 endDate:"2019-01-20 24:00",//结束日期 minuteStep: 10, //可选择日期颗粒度 showMeridian: false, //显示 上午/下午 clearBtn: true,//清除
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="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="100%">
<option selected="selected" value=''>--请选择品规--</option>
</select>
</div>
</div>
<script>
$(".select2").select2();//以后扩展 var element = $(".productlist"); var skuelement = $(".skulist"); //初始化产品列表 getselect2(null, "home/GetProduct", "--请选择产品--", element); //绑定事件 element.on("change", function () { //初始化品规列表 getselect2($(this).val(), "home/GetSKUbyProductkid", "--请选择品规--", skuelement); });
</script>
引用的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=" + kid var selectlist = " <option value=''>" + deftext + "</option>"; $.ajax({ type: "get", url: geturl, dataType: "json", data: _data, contentType: false, processData: false, success: function (responsedata) { //返回值中必须包括Status //返回值的ResultData中必须包括kid,name if (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 });
后端代码: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; }
[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; }