JQuery dataTable 扩展+Ajax Post，Get一些基本操作（一）
首先， Asp.net MVC 系列暂时没有发现封装好的 类似于web form 的datagrid， 只有一款Jquery 的dataTable ， 官网地址 http://www.datatables.net, 接下来讲解一下关于自己在项目中对datatable进行扩展的一些实例。（first，Asp.net MVC have not packaging control similar the web form datagrid , and now i just konw Jquery dataTable, and The website address: http://www.datatables.net, the next ,i will list some examples that i have meet some issues in project）,
直接上视图代码
<form method="post" onsubmit="return MaintainDel();"> <div id="Message"> <h3 style="color:red">@ViewBag.mes</h3> </div> <input id="ChooseUserId" name="ChooseUserId" type="hidden" /> <div class="row"> <div class="col-lg-12"> <div class="panel panel-default"> <!--<div class="panel-heading"> Users </div>--> <div class="panel-body"> <div class="table-responsive"> <table id="tab" class="table table-striped table-bordered table-hover"> <thead> <tr> <th>Delete</th> <th>NRIC</th> <th>USER ID</th> <th>NAME</th> <th>Email</th> <th>ContactNo.</th> <th>Agency</th> <th>Designation</th> <th>SchemeRole</th> @*<th>IsDeleted</th>*@ </tr> </thead> </table> </div> </div> </div> </div> </div> <div class="text-center"> <input id="AddUserInfo" type="button" class="btn btn-default" value="Add User" onclick="AddUser();" name="btnaction" /> <input id="DelUserInfo" type="submit" class="btn btn-default" value="Delete" name="btnaction" /> </div> </form>
对于JQuerydatatable， 我们只需要在视图中写出table的head 就可以， 接下来是controller里面从数据库拿一个list的方法，由于project用的是EF+MVC+Storeprocedure ，对于拿数据方面就不多讲，下面是controller的代码：
[HttpGet]
[MyAuthorize(ActionName = ActionCode.MaintainSuperUserAdmin)]
public ActionResult MaintainSuperUserAdmin()
{
return View();
}
/// <summary>
/// return Json Data for Jquery Table
/// </summary>
/// <param name="parm"></param>
/// <returns></returns>
public JsonResult PageList(DataTablesParam parm)
{
int iDisplayStart = Convert.ToInt32(Request.Params["iDisplayStart"]);
//data size
int iDisplayLength = Convert.ToInt32(Request.Params["iDisplayLength"]);
//data total
int totalCount;
IEnumerable<UserUserInfo> user = this.ServiceLocator.GetService<IUserInfoRoleSchemeService>().GetUserInfoRoleSchemeViewInfo(Common.AdminRoleId.SuperAdminId, appid, iDisplayStart, iDisplayLength, out totalCount).ToList();
return Json(new
{
sEcho = parm.sEcho,
iTotalRecords = totalCount,
iTotalDisplayRecords = totalCount,
aaData = user
}, JsonRequestBehavior.AllowGet);
}
一个Action对应一个View 改View的数据从Jsonresult中获取。
[MyAuthorize(ActionName = ActionCode.MaintainSuperUserAdmin)]这段是用户权限过滤器 就不细讲，可用可不用。 主要代码为
PageList中 拿list数据 以及返回Json格式。Dataparam为个人封装的 可以接收JqueryDatatable 一些属性的数据，（注意JQueryDatatable 自带分页效果）
public class DataTablesParam
{
public int iDisplayStart { get; set; }
public int iDisplayLength { get; set; }
public int iColumns { get; set; }
public string sSearch { get; set; }
public bool bEscapeRegex { get; set; }
public int iSortingCols { get; set; }
public int sEcho { get; set; }
public int total { get; set; }
public List<bool> bSortable { get; set; }
public List<bool> bSearchable { get; set; }
public List<string> sSearchColumns { get; set; }
public List<int> iSortCol { get; set; }
public List<string> sSortDir { get; set; }
public List<bool> bEscapeRegexColumns { get; set; }
public DataTablesParam()
{
bSortable = new List<bool>();
bSearchable = new List<bool>();
sSearchColumns = new List<string>();
iSortCol = new List<int>();
sSortDir = new List<string>();
bEscapeRegexColumns = new List<bool>();
}
public DataTablesParam(int iColumns)
{
this.iColumns = iColumns;
bSortable = new List<bool>(iColumns);
bSearchable = new List<bool>(iColumns);
sSearchColumns = new List<string>(iColumns);
iSortCol = new List<int>(iColumns);
sSortDir = new List<string>(iColumns);
bEscapeRegexColumns = new List<bool>(iColumns);
}
}
Ok 一切就绪了，那么接下来就是如何将后台拿到的数据传递给View的Table，下面是关于这方面的JQuery代码，关于datatable的一些属性，大家就百度吧，，有用到的再说。
$(document).ready(function () {
var admin = $('#tab').dataTable({
"sAjaxSource": "@Url.Content("~/UserInfoRoleScheme/SchemePagelist")",
//"sScrollX": "100%",
"sScrollXInner": "100%",
//"bScrollCollapse": true,
"serverSide": true,
'bPaginate': true,
"bLengthChange": false,
"bSort": false,
"bFilter": false,
"oLanguage": {
"sZeroRecords": "@Messages.General.EmptyData.Format()",
"sEmptyTable": "@Messages.General.EmptyData.Format()",
},
"aoColumnDefs": [
{
"render": function (data, type, full) {
if (full.IsDeleted == true) {
return full.UserName;
}
else {
return '<a href="' + "@Url.Content("~/UserInfoRoleScheme/UpdateSchemeUser")" + "?userid=" + full.UserId + '">' + full.FullName + '</a>';
}
},
"targets": 3
},
{
"render": function (data, type, full) {
return '<input type="checkbox" id="CheckUser" name="SelectedRoleId" class="userCheck" value="' + full.UserId + '"/>';
},
"targets": 0
},
{
"render": function (data, type, full) {
return Trim(full.SchemeRole);
},
"targets": 8
},
//{
// "render": function (data, type, full) {
// if (full.IsDeleted == true) {
// return "Yes";
// }
// else {
// return "No";
// }
// },
// "targets": 10
//},
],
'aoColumns': [
{ "mData": "UserInRoleId" },
{ "mData": "Nric" },
{ "mData": "AdId" },
{ "mData": "FullName" },
{ "mData": "EmailAddress" },
{ "mData": "MobileAlias" },
{ "mData": "AgencyId" },
{ "mData": "Designation" },
{ "mData": "SchemeRole" },
//{ "mData": "SchemeName" },
]
});
})
该段JQuery代码 ，，，注意
"mData"的时候 输入的字段名字一定要与后台list的columns一致，不然获取不到该列的数据，
"oLanguage": {
"sZeroRecords": "@Messages.General.EmptyData.Format()",
"sEmptyTable": "@Messages.General.EmptyData.Format()",
},
改属性为list为空的时候 JQueryTable显示的errormessage ；
"aoColumnDefs": 是自己对datatable每一列的一些扩展定义，比如 当 我点击每一行的名字的时候 链接到Update页面更新该用户的所有信息。
checkbox 每一行自动加上checkbox便于 进行一些操作，批量删除，单个删除等操作。
"targets" 从0 开始 可以定位到每一列 如 0 就是第一列 checkbox。
"render": function (data, type, full) full为该行的所有数据，data 为该行该列的数据。
下面 为Jquery Datatable 的展示效果，很多属性没设置，，都是根据客户需求来的，，各位可以参考官网自行设置。
加入了checkbox之后由于是根据后台的数据动态的显示的，，所以checkbox的取值 给我了很大的困扰，下面的Jquery方法 是我感觉比较好的一种吧，一般的都是用id取值，但是在相同的id下 我们不得不考虑用id取值的准确性，因此，我们通过class 遍历 对checkbox进行取值。
var UserId="";
$('.userCheck').each(function () {
if (this.checked == true) {
UserId += $(this).attr('value') + ','
}
})
得到一个string类型的数据，就可以传回后台通过一系列操作，达到自己想要操作的目的了。
自己整理的一些东西
