在Bsgrid中添加下拉框

在Bsgrid中添加下拉框

使用的工具：Visual Studio、Java Script、，还有插件Bsgrid
作者：清晨
时间：2019年04月08日

结果：

首先要有Bsgrid的如下插件：

css插件：

    <link href="~/Content/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/jquery.bsgrid-1.37/builds/merged/bsgrid.all.min.css" rel="stylesheet" />
    <link href="~/Content/jquery.bsgrid-1.37/builds/css/skins/grid_bootstrap.min.css" rel="stylesheet" />

js插件：

    <script src="~/Content/bootstrap-3.3.7-dist/js/jquery-2.0.3.min.js"></script>
    <script src="~/Content/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="~/Content/jquery.bsgrid-1.37/builds/merged/bsgrid.all.min.js"></script>
    <script src="~/Content/jquery.bsgrid-1.37/builds/js/lang/grid.zh-CN.min.js"></script>

Bsgrid表格视图：

     <div class="col-lg-12 col-md-12 col-sm-12" style="margin-top:10px;">
         <table id="test_table" style="width:100%">
             <tr>
                <th w_index="ID" w_hidden="true">ID</th>
                <th w_index="Name">姓名</th>
                <th w_index="datee">入职日期</th>
                <th w_index="SexName">性别</th>
                <th w_index="DepartmentName" w_render="createSelectDepartment">部门</th>
                <th w_index="Phone">电话</th>
                <th w_index="Salary">金额</th>                
             </tr>
        </table>               
    </div>

Script

  <script>
            var test_table;//声明Bsgrid表格视图的id
            var DATA;//声明接收下拉框的数据
           
        $(function () {
            ///SelectBangDing/Select/SelectDepartment路径、把data中的数据给DATA中
            $.post("/SelectBangDing/Select/SelectDepartment", function (data) {

                DATA = data;
            });
            //Bsgrid的基本用法
            test_table = $.fn.bsgrid.init('test_table', {
                //这些是初次化表格的参数
                url: '/SelectBangDing/Select/Selecttest_employees',
                autoLoad: true,//自动加载数据
                stripeRows: true,//隔行变色
                rowHoverColor: true,//划过行变色
                rowSelectedColor: true,//是否显示选中行背景色
                pageSize: 5,//默认页面大小
                pageSizeSelect: true,//是否选择分页页数下拉框
                pagingLittleToolbar: true,//精简的图标按钮分页工具条
                pagingToolbarAlign: "left"//分页工具条的显示位置

            });

        });

           // bsgrid 表格下拉框数据（createSelectDepartment表格视图中的事件）
        function createSelectDepartment(record) {
                var STR;
                $.each(DATA, function (i) {
                    //这个地方就是给表格的下拉框赋予DepartmentID 的值
                    if (record.DepartmentID == 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>";
                    }
                });
                //下拉框的width(宽度)
                str = "<select style='width:35%;'>" + STR + "</select>";
                return str;
        }

    </script>

Controller（控制器）写法：

#region Select
        public ActionResult Selecttest_employees(BsgridPage bsgridPage)
        {
            var list = (from tbemployees in mytest.test_employees
                        join tbsex in mytest.test_sex on tbemployees.SexID equals tbsex.SexID
                        //join tbdepartment in mytest.test_department on tbemployees.DepartmentID equals tbdepartment.DepartmentID
                        // where tbemployees.ID 
                        //首先我注释的代码是连接关系，只要数据库中那值为null的时候，那条数据就在Bsgrid表格中出现不了，只能用外连接的方式
                        select new test_employeesvo
                        {
                            ID = tbemployees.ID,
                            Name = tbemployees.Name,
                            datee = tbemployees.Date.ToString(),
                            SexID = tbemployees.SexID,
                            DepartmentID = tbemployees.DepartmentID,
                            //DepartmentName=mytest.test_department.Where(m=>m.DepartmentID= tbemployees.DepartmentID).setbdepartment.DepartmentName,
                            Salary = tbemployees.Salary,
                            Phone = tbemployees.Phone,
                            SexName=tbsex.SexName,
                        }).ToList();
            //foreach是单独把DepartmentID拿出来单独赋值
            foreach (var item in list)
            {
                int DepartmentID = 0;
                //当DepartmentID等于null时
                if (item.DepartmentID==null)
                {
                   // item.DepartmentName = "请选择";
                    item.DepartmentID =4;

                }
                else
                {
                    //如下：（int）的方法是强制转换
                    DepartmentID = (int)item.DepartmentID;
                    //用了Linq语法
                    item.DepartmentName = mytest.test_department.Where(m => m.DepartmentID == DepartmentID).Select(p=>p.DepartmentName).SingleOrDefault();
                }
            }
            //条数
            int intTotalRow = list.Count();
            list = list.Skip(bsgridPage.GetStartIndex()).Take(bsgridPage.pageSize).ToList();

            Bsgrid<test_employeesvo> bsgrid = new Bsgrid<test_employeesvo>();

            bsgrid.success = true;
            bsgrid.totalRows = intTotalRow;
            bsgrid.curPage = bsgridPage.curPage;
            bsgrid.data = list;//数据
            return Json(bsgrid, JsonRequestBehavior.AllowGet);
        }

        //部门下拉框的查询
        public ActionResult SelectDepartment ()
        {
            var list = mytest.test_department.Select(m => new { id = m.DepartmentID, name = m.DepartmentName }).ToList();
            return Json(list, JsonRequestBehavior.AllowGet);
        }
        #endregion

Bsgrid、BsgridPage、 test_employeesvo 类

Bsgrid

 public class Bsgrid<T>
    {
        /// <summary>
        /// 成功否
        /// </summary>
        public bool success { get; set; }
        /// <summary>
        /// 总行数
        /// </summary>
        public int totalRows { get; set; }
        /// <summary>
        /// 当前页面
        /// </summary>
        public int curPage { get; set; }
        /// <summary>
        /// 数据
        /// </summary>
        public List<T> data { get; set; }
    }

---------------------------------------------------------------
BsgridPage 类

public class BsgridPage
    {
        public int pageSize { get; set; }//页面大小 类的属性
        public int curPage { get; set; }//当前页
        public string sortName { get; set; }//排序属性name
        public string sortOrder { get; set; }//排序方向
        public int GetStartIndex()//分页开始序号
        {
            return (curPage - 1) * pageSize;
        }
        public int GetEndIndex()// 分页结束序号
        {
            return curPage * pageSize - 1;
        }

    }
--------------------------------------------------------------
test_employeesvo类

    public class test_employeesvo : test_employees
    {
        public string SexName { set; get; }
        
        public string DepartmentName { set; get; }

        private string Datees;
        //时间的转换
        public string datee
        {
            set
            {
                try
                {
                    DateTime dt = Convert.ToDateTime(value);
                    Datees = dt.ToString("yyyy-MM-dd");
                }
                catch (Exception)
                {
                    Datees = value;
                }
            }
            get
            {
                return Datees;
            }
        }
    }

有个跟好的技术，可以分享留言、、、谢谢共同进步。。