开发工具与关键技术：Visual Studio / 绑定数据 作者：郑名方 撰写时间：2019年5月 23日
下拉框的样式大部分来自数据库、还有小部分来自自己制定的值。原生JS绑定下拉框代码的样式的是往select标签里面追加内容,就是用append追加到(’’ + jsonData[k].text + ‘’)然后用for循环。如果做项目的时候不只一个页面用到下拉框数据绑定，我觉得可以把绑定下拉框数据的方法封装起来使用起来大大提高效率，这样可以节约时间使用很方便代码量也大大减少。 下面的代码来源是老师上课。 jquery 根据url创建下拉框 @author en @param fromId form表单id @param url 查询下拉框的url @param value 设置值
function createSelect(selectId, url, value) { $.post(url, function (jsonData) { if (selectId.indexOf(’#’) != 0) { selectId = ‘#’ + selectId; } $(selectId).empty();//清空该元素 //内部前置内容 $(selectId).prepend(’’ + “–请选择–” + ‘’); //创建option for (k in jsonData) { $(selectId).append(’’ + jsonData[k].text + ‘’); } //设置选中值 if (value != undefined && value != null && value != ‘’) { $(selectId).val(value); } }); } 下拉框数据绑定创建方法和查询表格数据相似度很高，无论是绑定数据用的是单表、还是多表查询，要看下拉框绑定的数据。查询所有绑定的数据信息，就好像新增数据的查询一样先创建一个临时的大表，把要查询的表都连接起来主建一个表。 下拉框数据绑定要具备的条件，查询名称不为空、发布时间不为空、类型ID不为空等。还有查询的总行数、分页等。查询的附件也要创建方法把相关的ID，创建一个临时表把要连接的表都连接起来。 下面的代码图片来源是老师上课。
//绑定公告类型下拉框 public ActionResult SelectNoticeTypeForSelect() { var lists = (from tbNoticeType in myModels.SYS_NoticeTypeTable select new Select { id = tbNoticeType.NoticeTypeID, text = tbNoticeType.NoticeTypeName }).ToList(); return Json(lists, JsonRequestBehavior.AllowGet); } //查询所有公告信息 public ActionResult SelectNoticeAll(LayuiTablePage layuiTablePage, string noticeName, string releaseTime, int noticeTypeId) { #region 查询 var items = from tbNotices in myModels.PW_NoticeTable//发布公告表 join tbNoticeTypeDetail in myModels.SYS_NoticeTypeDetail on tbNotices.NoticeTypeDetailID//公告类型明细表 equals tbNoticeTypeDetail.NoticeTypeDetailID join tbNoticeType in myModels.SYS_NoticeTypeTable on tbNoticeTypeDetail.NoticeTypeID//公告类型表 equals tbNoticeType.NoticeTypeID //发布公告的用户只能是两种用户：学生和教师。 join tbUser in myModels.PW_User on tbNotices.UserID equals tbUser.UserID//用户表 join tbTeacher in myModels.PW_Teacher on tbUser.UserID equals tbTeacher.UserID//教师表 //倒叙排序 orderby tbNotices.NoticeID descending select new Notice { NoticeID = tbNotices.NoticeID, UserID = tbNotices.UserID, NoticeTypeDetailID = tbNotices.NoticeTypeDetailID, AcademeID = tbNotices.AcademeID, NoticeName = tbNotices.NoticeName, ReleaseTime = tbNotices.ReleaseTime, schoolRelated = tbNotices.schoolRelated, NoticeContent = tbNotices.NoticeContent, BrowsingTimes = tbNotices.BrowsingTimes, Overhead = tbNotices.Overhead, New = tbNotices.New, Editor = tbTeacher.TeacherName, NoticeTypeName = tbNoticeType.NoticeTypeName, NoticeTypeID = tbNoticeType.NoticeTypeID, NoticeTypeDetailName = tbNoticeTypeDetail.NoticeTypeDetailName, ReleaseTimeStr = tbNotices.ReleaseTime.ToString() }; #endregion #region 条件 //公告名称不为空 if (!string.IsNullOrEmpty(noticeName)) { noticeName = noticeName.Trim(); items = items.Where(p => p.NoticeName.Contains(noticeName)); } //发布时间不为空 if (!string.IsNullOrEmpty(releaseTime)) { try { //Convert.ToDateTime万能转换 DateTime dtreleaseTime = Convert.ToDateTime(releaseTime); items = items.Where(p => p.ReleaseTime == dtreleaseTime); } catch (Exception e) { } } //类型ID不为空 if (noticeTypeId > 0) { items = items.Where(p => p.NoticeTypeID == noticeTypeId); } #endregion int intTotalRow = items.Count();//总行数 List<Notice> listNotices = items.Skip(layuiTablePage.GetStartIndex()).Take(layuiTablePage.limit).ToList();//分页 LayuiTableData<Notice> layuiTableData = new LayuiTableData<Notice> { count = intTotalRow, data = listNotices }; return Json(layuiTableData, JsonRequestBehavior.AllowGet); } // 查询公告的附件 ByNoticeId public ActionResult SelectFileByNoticeId(int noticeId, LayuiTablePage layuiTablePage) { var linqItems = from tbFile in myModels.PW_File//附件表 join tbNoticeTable in myModels.PW_NoticeTable on tbFile.NoticeID equals tbNoticeTable.NoticeID//公告表 join tbFileType in myModels.SYS_FileType on tbFile.FileTypeID equals tbFileType.FileTypeID//文件类型表 where tbFile.NoticeID == noticeId orderby tbFile.FileID select new Files { FileID = tbFile.FileID,//文件ID Files = tbFile.Files,//文件 NoticeName = tbNoticeTable.NoticeName,//公告名称 FileTypeName = tbFileType.FileTypeName,//文件类型 FileTypeID = tbFileType.FileTypeID, NoticeID = tbFile.NoticeID }; //总行数 int intTotalRow = linqItems.Count(); //查询数据 List<Files> listFile = linqItems.Skip(layuiTablePage.GetStartIndex()).Take(layuiTablePage.limit).ToList();//分页 LayuiTableData<Files> layuiTableData = new LayuiTableData<Files> { count = intTotalRow, data = listFile }; return Json(layuiTableData, JsonRequestBehavior.AllowGet); }下拉框数据绑定和绑定表格数据都是要做的步骤有要创建全局变量，初始化全局变量的编辑器、绑定下拉框、然后赋值、执行渲染。判断当一个下拉框数值改变时，绑定类型明细下拉框。
@*绑定数据*@ var editorNotice;//富文本编辑器 var tabFiles;//附件表格 var layer, layuiTable;//保存layui模块以便全局使用 var layerIndex; $(function () { //1.0 初始化 ckeditor富文本编辑器 editorNotice = CKEDITOR.replace('NoticeContent'); //1.1 下拉框 //公告类型 createSelect("selectNoticeType", "SelectNoticeTypeForSelect"); //当公告类型下拉框改变时，绑定公告类型明细下拉框 $("#selectNoticeType").change(function () { var noticeTypeId = $("#selectNoticeType").val(); createSelect("selectNoticeTypeDetail", "SelectNoticeTypeDetailForSelect?noticeTypeId=" + noticeTypeId); }); //1.2 轮播图片控制 //初始化轮播图片选择collapse $("#collapseOverhead").collapse({ toggle: false }); //当用户选择显示在轮播时显示 collapse $("#cNoticeCarousel").change(function () { //判断选中 if (document.getElementById("cNoticeCarousel").checked) { //显示DIV $("#collapseOverhead").collapse('show'); } else { //隐藏DIV $("#collapseOverhead").collapse('hide'); } }); //加载和初始化layui模块 layui.use(['layer', 'table'], function () { layer = layui.layer; layuiTable = layui.table; tabFiles = layuiTable.render({ elem: "#tabFiles",//html table id cols: [[ //表头 //{ type: 'checkbox', fixed: 'left' },//复选框列,fixed:'left' 将列固定在左边 { type: 'numbers', title: '序号' },//序号列，title设定标题名称 { field: 'FileTypeName', title: '文件类型' }, { field: 'Files', title: '文件' }, { field: 'FileName', title: '文件名称' }, { title: '操作', templet: setRemoveButton, width: 160, align: 'center', fixed: 'right' }//width: 160 指定宽度，align 指定对其方式 ]], page: { limit: 10,//指定每页显示的条数 limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项 }, //开启分页 data: [] }); //监听行单击事件（单击事件为：rowDouble） layuiTable.on('row(tabFiles)', function (obj) { var data = obj.data;//获取点击行数据 //标注选中样式 obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click'); }); tabFilesRefresh(); }); })