下拉框的数据绑定
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：VS与MVC JS
作者：陈锦通
撰写时间：2019年5月15日星期三
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
绑定下拉框的数据之前，你要知道你绑定的数据在那个数据库里面的那个表里确定是那个表之后。开始查询你要的数据然后让数，据绑定在页面上的下拉框里面，然后显示在页面上。
我们先来个单表的查询。代码如下：
#region 登录地址下拉框的绑定（查询）
public ActionResult selectArea()
{
//查询数据
var listArea = (from tbArea in myModel.D_Area
select new
{
id = tbArea.AreaID,
text = tbArea.Areaname
}).ToList();
return Json(listArea, JsonRequestBehavior.AllowGet);
}
#endregion
声明一个变量listArea让数据保存在from自定义的表名里面，然后in 是数据库的表名的名称，select new是新建查询，然后是你要查询的属性和值，然后再转化为ToList数据类型。下图是数据类型
返回的是表格数据类型。然后通过一个插件来接收控制器传过来的数据，然后显示在页面上。这个插件是（老师封装的）
<script src="~/Plugins/customfunction.js"></script>
/**
* jquery 根据json对象填充form表单
* @author en
* @param fromId form表单id
* @param jsonDate json对象
*/
function loadDatatoForm(fromId, jsonDate) {
var obj = jsonDate;
var key, value, tagName, type, arr;
for (x in obj) {//循环json对象
key = x;
value = obj[x];
//$("[name='"+key+"'],[name='"+key+"[]']").each(function(){
//更加form表单id 和 json对象中的key查找 表单控件
$("#" + fromId + " [name='" + key + "'],#" + fromId + " [name='" + key + "[]']").each(function () {
tagName = $(this)[0].tagName;
type = $(this).attr('type');
if (tagName == 'INPUT') {
if (type == 'radio') {
$(this).attr('checked', $(this).val() == value);
} else if (type == 'checkbox') {
try {
//数组
arr = value.split(',');
for (var i = 0; i < arr.length; i++) {
if ($(this).val() == arr[i]) {
$(this).attr('checked', true);
break;
}
}
} catch (e) {
//单个
$(this).attr('checked', value);
}
} else {
$(this).val(value);
}
} else if (tagName == 'TEXTAREA') {
$(this).val(value);
} else if (tagName == 'SELECT') {
//console.log($(this).hasClass("select2"));
if ($(this).hasClass("select2")) {
//select2 插件的赋值方法
$(this).val(value).trigger("change");
} else {
$(this).val(value);
}
}
});
}
}
/**
* 按照数字顺序排序的排序函数 array[] 数字排序 从小到大
* @param {} a
* @param {} b
* @returns {}
*/
function numberorderAsc(a, b) { return a - b; }
/**
* 按照数字顺序排序的排序函数 array[] 数字排序 从大到小
* @param {} a
* @param {} b
* @returns {}
*/
function numberorderDesc(a, b) { return b - a; }
/**
* jquery 根据json对象创建Select下拉框
* @author en
* @param fromId form表单id
* @param jsonDate json对象
*/
function selectLoadData(selectId, jsonData) {
if (selectId.indexOf('#') != 0) {
selectId = '#' + selectId;
}
$(selectId).empty();//清空该元素
for (k in jsonData) {
$(selectId).append('<option value="' + jsonData[k].id + '">' + jsonData[k].text + '</option>');
}
}
/**
* jquery 根据url创建下拉框
* @author en
* @param fromId form表单id
* @param url 查询下拉框的url
* @param value 设置值
*/
function createSelect(selectId, url, value) {
//console.log(defaultValue);
$.post(url, function (jsonData) {
//当用户传过来的ID值不带#号时，为标量拼接上#号
if (selectId.indexOf('#') != 0) {
selectId = '#' + selectId;
}
//清空该元素
$(selectId).empty();
//创建option
for (k in jsonData) {
$(selectId).append('<option value="' + jsonData[k].id + '">' + jsonData[k].text + '</option>');
}
//设置选中值
if (value != undefined && value != null && value != '') {
$(selectId).val(value);
}
});
}
要用这个插件时，要用三个参数（这是参数看情况填写），分别是id是你要绑定数据的id，第二个是方法的路径，第三个是回填数据时用到的。
var layer = layui.layer, from = layui.form;
$(function () {
//登录地址下拉框的绑定
createSelect("#Area", "/Main/selectArea");
});
createSelect这个方法是customfunction这个插件里面的方法，这个方法里面有三个参数第一个是id值、第二个是url，这个路径是要查询下拉框的路径、第三个是回调函数，数据回填时才有到的参数。下面是页面上的效果：