datetimepicker 基础使用/select2 基础使用

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="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>

 <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         });

前端分页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;
        }

posted @ 2019-01-15 14:17 老丹点赵阅读(350) 评论(0) 编辑收藏举报

刷新页面返回顶部

老牛脱机

datetimepicker 基础使用/select2 基础使用

公告