.net使用layui框架下。绑定搜索下拉框-模糊查询

摘要:
网上找了些,没一个全的,自己总结了下页面部分:JS部分:$(function(){layui.use(['layer','form','laypage','laydate'],function(){layer=layui.layer;form=layui.form;laydate=layui.laydate;laydate.render({elem:'#data'});form.on('select(depts)',function(data){varnum=$("#depts").val();GetGroups(num);});});LayuiCreateSelect("selManageUserID",);//开始绑定搜索下拉框。传来的默认选中的选项。ManageUser是后台存的value值});functionLayuiCreateSelect{//value设置加载完成时所选定的值//数据请求$.ajax({type:"post",url:"AddReservePlan.aspx?act=GetManageUser",dataType:"json",//data:{search_date:search_date,groupName:groupName,DepartmentClassID:DepartmentClassID},success:function{//判断id是否有"#"if(selectId.indexOf('#')!=0){selectId='#'+selectId;}$.empty();//清空该元素//创建optionvararr=r.list.split("|");arr.forEach//使用layui下拉框的必要代码layui.use('form',function(){varform=layui.form;//设置选中值if(value!=''){$.val;}form.render();//重载表单});},complete:function{layer.close;}});}代码部分:protectedvoidPage_Load{if(!

网上找了些,没一个全的,自己总结了下

页面部分:

<select   lay-search>                                                                 
                                </select>

JS部分:

$(function () {
            layui.use(['layer', 'form', 'laypage', 'laydate'], function () {
                layer = layui.layer;
                form = layui.form;
                laydate = layui.laydate;
                laydate.render({
                    elem: '#data'
                });
                form.on('select(depts)', function (data) {
                    var num = $("#depts").val();
                    GetGroups(num);
                });
            });
            LayuiCreateSelect("selManageUserID",<%=planInfo!=null?planInfo.ManageUser:"请选择" %>);//开始绑定搜索下拉框。传来的默认选中的选项。ManageUser是后台存的value值
          
           
        });

function LayuiCreateSelect(selectId, value) {//value  设置加载完成时所选定的值
            //数据请求
            $.ajax({
                type: "post",
                url: "AddReservePlan.aspx?act=GetManageUser",
                dataType: "json",
                //data: { search_date: search_date, groupName: groupName, DepartmentClassID: DepartmentClassID },
                success: function (r) {
                    //判断id是否有"#"
                    if (selectId.indexOf('#') != 0) {
                        selectId = '#' + selectId;
                    }
                    $(selectId).empty();//清空该元素
                    //创建option
                    var arr = r.list.split("|");
                    arr.forEach(function (item, index) {
                        $(selectId).append(item);
                    })
                    //使用layui下拉框的必要代码
                    layui.use('form', function () {
                        var form = layui.form;
                        //设置选中值
                        if (value != undefined && value != null && value != '') {
                            $(selectId).val(value);
                        }
                        form.render();//重载表单
                    });
                }, complete: function (r) {
                    layer.close(loadid);
                }
            });
        }

代码部分:

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                CheckLoginInfo();//检查登录
                if (!string.IsNullOrEmpty(Request["act"]))
                {
                    act = Request.QueryString["act"];
                }
                switch (act)
                {
                    case "GetManageUser":
                        GetManageUser();
                        break;
                    case "GetGroupList":
                        GetGroupList();
                        break;
                    case "AddPlan":
                        AddPlan();
                        break;
                    default:
                        PageLoad();
                        break;
                }
            }
        }


/// <summary>
        /// 获取预约人列表
        /// </summary>
        private void GetManageUser()
        {
            BLL.MyUser_YuyueBLL yuyueBLL = new BLL.MyUser_YuyueBLL();
            DataTable dtyuyue = yuyueBLL.GetList02("").Tables[0];
            StringBuilder sbyuyue = new StringBuilder();
            for (int i = 0; i < dtyuyue.Rows.Count; i++)
            {
                sbyuyue.Append("<option value='"+ dtyuyue.Rows[i]["userID"].ToString() + "'>"+ dtyuyue.Rows[i]["userName"].ToString() +"-"+ dtyuyue.Rows[i]["groupName"].ToString() + "</option>|");
            }
            string resultJson = JsonHelper.ObjectToJSON(sbyuyue);
            var rsp_obj = new
            {
                code = 200,
                list = sbyuyue.ToString().Substring(0, sbyuyue.ToString().Length)
            };
            Response.Write(JsonConvert.SerializeObject(rsp_obj));
            Response.End();
        }

免责声明:文章转载自《.net使用layui框架下。绑定搜索下拉框-模糊查询》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇开源项目 log4android 使用方式详解Charles系列二:Charles PC端和手机端抓取HTTP和HTTPS协议请求、HTTPS通用抓包规则下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

[ PyQt入门教程 ] PyQt5基本控件使用:单选按钮、复选框、下拉框、文本框

本文主要介绍PyQt5界面最基本使用的单选按钮、复选框、下拉框三种控件的使用方法进行介绍。 1、RadioButton单选按钮/CheckBox复选框。需要知道如何判断单选按钮是否被选中。 2、ComboBox下拉框。需要知道如何对下拉框中的取值进行设置以及代码实现中如何获取用户选中的值。 带着这些问题下面开始介绍这RadioButton单选按钮、Chec...

EasyUI:年份、月份下拉框Demo

EasyUI:年份、月份下拉框Demo jsp中定义: <td style="text-align:center;"><font style="font-size: 12px;">年度:</font></td> <td style="text-align: left;">  ...

layui创建表单下拉框样式不显示

border-left: 5px solid #009688; 注释:solid实体,实心样式; Blockquote:块引用;Fieldset:字段集; 1.所有浏览器都支持 <fieldset> 标签。 fieldset 元素可将表单内的相关元素分组。 <fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。...

Qt之QComboBox定制

    说起下拉框,想必大家都比较熟悉,在我们注册一些网站的时候,会出现大量的地区数据供我们选择,这个时候出现的就是下拉框列表,再比如字体选择的时候也是使用的下拉框,如图1所示。下拉框到处可见,作为一个图形库,qt也提供了QtComboBox类来供我们使用,但是有些时候简单的下拉列表已经满足不了我们的需求,如图2所示,是一个下拉表格,这个时候就需要我们自己...

bootstrap-select 多选下拉框使用教程

http://silviomoreto.github.io/bootstrap-select/ 一、使用bootstrap-select组件时,先引用下列文件 最后一个文件defaults-zh_CN.min.js非必需,是组件中文化的时候才需要引用。 <!--Latest compiled and minified CSS --> <...

RobotFramework框架做自动化的过程中,遇到不能选择下拉框问题

1.描述 使用RobotFramework框架做自动化的过程中,遇到不能选择下拉框问题。 2.遇到的问题 关于下拉框的使用,网上都是这么使用的 select From List By Value Xpath=//* [@] vlaue # select From List By Value 关键字用于选择下拉框。 Xpath=//* [@] 定位下拉框;...