aspx使用xm-select

一、静态数据使用xm-select多选

1.1 添加引用

我这里将js文件下载到本地https://gitee.com/maplemei/xm-select/releases

这里使用到layui，也可以独立使用，如果不使用layui可以引用jquery：

<!--<script type="text/javascript" src="/Resources/jquery/js/jquery-1.10.2.js"></script>--->
<script src="/Resources/layui/layui.js"></script>
<script src="/Resources/jquery/plugIn/xm-select.js"></script>

1.2 定义需要使用多选的元素

 <div  class="layui-inline">
       <asp:TextBox ID="txtysdl" runat="server" style="display:none"></asp:TextBox>
       <label class="layui-form-label">元素大类</label>
       <div class="layui-input-inline" id="yuansdl" > 
       </div>
   </div>

1.3 使用

 layui.use(['upload', 'form'], function () {
       var $ = layui.jquery;
       var elysdl = xmSelect.render({
           el: '#yuansdl',
           toolbar: { show: true },
           autoRow: true,
           paging: true,
           filterable: true,
           pageSize: 5,
           on: function (data) {
               //arr:  当前多选已选中的数据
               var arr = data.arr;
               var ysdlVal = '';
               $.each(arr, function (i, item) {
                   ysdlVal += item.name + ',';
               })
               //这里需要把选中项回写到aspx的TextBox组件中，方便后台使用
               $("#txtysdl").val(ysdlVal);
           },
           data: [{ name: '0', value: '0', },
           { name: 'NP', value: 'NP', },
           { name: '东陵玉', value: '东陵玉', },
           { name: '书籍', value: '书籍', },
           { name: '云冈', value: '云冈', },
           { name: '代销', value: '代销', },
           { name: '华宇', value: '华宇', },
           { name: '合金', value: '合金', },
           { name: '和田玉', value: '和田玉', },
           { name: '天龙山', value: '天龙山', },
           { name: '平遥', value: '平遥', },
           { name: '晋祠', value: '晋祠', },
           { name: '水晶', value: '水晶', },
           { name: '烧蓝', value: '烧蓝', },
           { name: '玛瑙', value: '玛瑙', },
           { name: '珍珠', value: '珍珠', },
           { name: '珐琅', value: '珐琅', },
           { name: '琉璃', value: '琉璃', },
           { name: '翡翠', value: '翡翠', },
           { name: '足金', value: '足金', },
           { name: '运城关帝庙', value: '运城关帝庙', },
           { name: '金箔', value: '金箔', },
           { name: '钢饰', value: '钢饰', },
           { name: '银饰', value: '银饰' }]
       });
        //页面刷新会将多选值清空，此时需要将值选择上
        var ysdl = $("#txtysdl").val();
        if (ysdl) {
            var arrysdl = ysdl.split(',');
            var arrobj = new Array();
            for (var i = 0; i < arrysdl.length; i++) {
                var obj = new Object();
                obj.name = arrysdl[i];
                obj.value = arrysdl[i];
                arrobj.push(obj);
            }
            elysdl.setValue(arrobj);
        } else {
            elysdl.setValue([]);
        }
})

效果

二、动态调用

2.1 代码演示

这里用ajax请求后台数据，用于填充多选项

  var elnewClass2;
        $.getJSON("/ajax/GetDatax.ashx?op=multipicer&op2=wh_zpflej", {}, function (data) {
            var arrobj = new Array();
            for (var i = 0; i < data.length; i++) {
                var obj = new Object();
                obj.name = data[i].TEXT;
                obj.value = data[i].VALUE;
                arrobj.push(obj);
            }
            elnewClass2 = xmSelect.render({
                el: '#newClass2',
                toolbar: { show: true },
                autoRow: true,
                data: arrobj
            })
        });

C# 后台代码

 case "wh_zpflej":
             sql = " select title value, title text from  dt_article_category where parent_id<>0 and class_list = 'ZPFLEJ' order by id ";
             break;
             var  ds = DBS.New().getData(sql);
             var json = CJSON.GetJsonFromDataTable(ds.Tables[0]);
             context.Response.Write(json);
             context.Response.End(); 
/****************************************************************************************************************/

  public static string GetJsonFromDataTable(DataTable dt)
        {
            StringBuilder JsonString = new StringBuilder();
            JsonString.Append("[ ");
            if (dt != null && dt.Rows.Count > 0)
            {
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    JsonString.Append("{ ");
                    for (int j = 0; j < dt.Columns.Count; j++)
                    {
                        string tmp = "";
                        string bl = dt.Rows[i][j].ToString().ToUpper();
                        
                        if ((dt.Columns[j].DataType != typeof(System.Decimal)) && bl != "TRUE" && bl != "FALSE")
                        {
                            tmp = "\"";
                        }
                         

                        string cn = dt.Columns[j].ColumnName.ToString();

                        if (cn == "LEVEL" || 
                            cn == "PARENT_ID" || 
                            cn == "LEAF" || 
                            cn == "EXPANDED" || 
                            cn == "LOADED" || 
                            cn == "PARENT" || 
                            cn == "ISLEAF")
                            {
                                cn = cn.ToLower();
                            }

                        JsonString.Append("\"" + cn + "\":" + tmp + dt.Rows[i][j].ToString().Replace("\"","-") + tmp);

                        if (j < dt.Columns.Count - 1)
                        {
                            JsonString.Append(",");
                        }
                    }
                    
                    if (i == dt.Rows.Count - 1)
                    {
                        JsonString.Append("} ");
                    }
                    else
                    {
                        JsonString.Append("}, ");
                    }
                }
            }
            JsonString.Append("]");
            return JsonString.ToString();
        }