表格中的下拉框

开发工具与关键技术：SQL、C#/MVC

撰写时间：2019年1月18日

下面我们在自动加载表格数据里加入下拉框的部分，下面我们来看一个例子，如在表格中我们在自动加载数据的时候下拉框也自动加载进去

其实在表格中做下拉框也是非常简单的。在控制器中写出查询状态的下拉框数据代码，和其他的查询下拉框的方法一样。

//下拉框方法
  public ActionResult SelectTellerStatus()
        {
            var list = myModel.SYS_TellerStatus.Select(m => new { id = m.TellerStatusID, name = m.TellerStatus }).ToList();
            return Json(list, JsonRequestBehavior.AllowGet);
        }

在HTML中的《th》添加w_render如下代码

<thead>
                <tr>
 
                    <th w_index="TitleID" w_check="true"></th>
                    <th w_index="OperatorNunber">操作员号</th>
                    <th w_index="TellerNumber">柜员号</th>
                    <th w_index="TellerName">柜员名</th>
                    <th w_index="TellerStatus" w_render="createSelect">柜员状态</th>
                    <th w_render="SetState">在线状态</th><!--SetState-->
                    <th w_index="OnlineStatus" w_hidden="true">在线状态</th>
                </tr>
            </thead>

在HTML首先声明一个变量，然后控制器传过来的数据等于变量，bsgrid 表格下拉框数据，我们在再声明一个变量，通过变例来追加，

var DATA;
        $(function () {
            $.post("/JurisdictionManagement/GYQXYW/SelectTellerStatus", function (data) {
                
                DATA = data;
            });
                //1.1初始化题目信息表格
                tbTitlesInfor = $.fn.bsgrid.init('tbTitlesInfor', {
                    url: "/JurisdictionManagement/GYQXYW/JGWH",
                    autoLoad: true,
                    stripeRows: true,//隔行变色
                    rowHoverColor: true,//划过行变色
                    rowSelectedColor: true,//是否显示选中行背景色
                    pageSize: 8,//
                    pageSizeSelect: false,//是否选择分页页数下拉框
                    pagingLittleToolbar: true,//精简的图标按钮分页工具条
                    pagingToolbarAlign: "left",//分页工具条的显示位置
                    event: {
                        customRowEvents: {
                            click: function (record, rowIndex, trObj, options) {
                                Check("#tbTitlesInfor tr", rowIndex + 1);
                            }
                        }
                    }
                });
            });
 //bsgrid 表格下拉框数据
        function createSelect(record) {
            var STR;
            $.each(DATA, function (i) {
                if (record.TellerStatusID == DATA[i].id) {
                    STR += "<option value=" + DATA[i].id + " selected>" + DATA[i].name + "</option>";
                } else {
                    STR += "<option value=" + DATA[i].id + ">" + DATA[i].name + "</option>";
                }
            });
            str = "<select style='width:21%;'>" + STR + "</select>";
            return str;
        }

最后就是我们要的页面了。