zoukankan      html  css  js  c++  java
  • 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="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         });
    前端分页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;
            }
  • 相关阅读:
    vue 实现左侧分类列表,右侧文档列表
    C# string数组与list< string >的相互转换
    c# List<string>的用法
    类数组 数组
    事件
    js封装方法和浏览器内核
    dom
    try...catch es5
    data对象 定时器
    call apply 原型 原型链
  • 原文地址:https://www.cnblogs.com/daniel-niu/p/10271631.html
Copyright © 2011-2022 走看看