实现如图所示效果
@{ var db = Database.Open("rcdb"); var selectCommand = "SELECT * FROM Users"; var searchTerm = ""; if (!Request.QueryString["searchTitle"].IsEmpty()) { selectCommand = "SELECT * FROM Users WHERE UserName LIKE @0"; searchTerm = "%" + Request["searchTitle"] + "%"; } var selectedData = db.Query(selectCommand, searchTerm); var grid = new WebGrid(source: selectedData, rowsPerPage: 20); } //body部分 <div class="content01" id="content01"> <form name="listForm" method="post" id="listForm"> <div> @grid.Table( tableStyle: "grid", headerStyle: "gridhead", footerStyle: "gridfooter", alternatingRowStyle: "alt", columns: grid.Columns( grid.Column("", format:@<input type="checkbox" class="cb" name="id" value="@item.Id">, canSort: false), grid.Column("Id", "Id"), grid.Column("UserName", "账号"), grid.Column("Email", "邮箱"), grid.Column("Role", "角色",format:@<span>@if(item.Role == 0){<text>普通会员</text>}else{ <text>超级会员</text>}</span>), grid.Column("OrderNum", "排序"), grid.Column("Status", "状态",format:@<span>@if(item.Status == 0){<text>开启</text>}else{ <text>关闭</text>}</span>), grid.Column("操作",format: @<a href="userEdit?id=@item.Id">设置</a>), grid.Column("操作",format: @<a href="userDelete?id=@item.Id">删除</a>) ) ) </div> <div> <div class="pageleft"> <input type="checkbox" name="chkbtn" value="" onclick="checkAll(this)"> <input type="submit" class="button03" name="btn" id="btn0201" value="设置状态"/> <input type="submit" class="button03" name="btn" id="btn0202" value="删除"/> </div> <div class="page"> @grid.Pager( mode: WebGridPagerModes.All, firstText: "首页", previousText: "上一页", nextText: "下一页", lastText: "末页", numericLinksCount: 5 ) </div> </div> </form> </div>
用jquery比较简单
//给表格添加序号
$(function () {
$('.sn').each(function (index) {
sn= index+1;
$(this).append(sn);
});
});
可以取索引值
怎么取?
如果是数据库,而且是sqlserver,可以用ROW_NUMBER()函数,如果是oracle,貌似直接有这个字段。。。
至于webgrid,还真没用过,所以不知道有没有类似rowindex的属性的(这样永远从1开始吧,如果是数据库那样,第二页数据就是从11开始了)