在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).se////tbdepartment.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;
}
}
}
有个跟好的技术,可以分享留言、、、谢谢共同进步。。