一、静态数据使用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();
}