当我们有多个页面都要用到表格时,可以写一个表格模板,在其他页面也可以使用。
以下都是添加你们必要的就好了,有些文件固定数据被我删掉的,因为涉及到文件名
首先要在试图views文件(专门放前端页面的文件)下创建Tables.Master文件,用来放表格模板。样式什么的可以自己调整。
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Tables.master.cs" Inherits="G.Views.Tables" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head runat="server">
<title></title>
<!--begin datatable styles-->
<link href="/Content/Jqtable/dataTables/demo_page.css" rel="stylesheet" type="text/css" />
<link href="/Content/Jqtable/dataTables/demo_table_jui.css" rel="stylesheet" type="text/css" />
<link href="/Content/Jqtable/themes/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" media="all" />
<!--end datatable styles-->
<script type="text/javascript">
$(document).ready(function () {
/* Initialize master table - optionally */
var oTable = $('#masterList').dataTable({
"bJQueryUI": true,
"oLanguage": {
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sInfo": "从 _START_ 到 _END_ 共 _TOTAL_ 条数据",
"sZeroRecords": "抱歉, 没有匹配结果",
"sInfoEmpty": "没有数据",
"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
"sSearch": "模糊搜索",
"sLoadingRecords": "载入中……",
"sProcessing": "处理中……",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
}
},
"aLengthMenu": [
[5, 10, 30, 100, -1],
['每页5条', '每页10条', '每页30条', '每页100条', "显示所有数据"]
],
"aaSorting": [
[5, "desc"]
],
"bRetrieve": true,
'sPaginationType': 'full_numbers'
});
/* Add a click handler to the rows - this could be used as a callback */
$("#masterList tbody").click(function (event) {
$(oTable.fnSettings().aoData).each(function () {
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
var MasterRecordID = null;
</script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body id="dt_example">
上面只是Tables.Master的内容,还要在Tables.Master.cs中写上:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace G.Views
{
public partial class Tables : System.Web.UI.MasterPage
{
public object DataSource
{
get
{
return ViewState["Repeater1"];
}
set
{
ViewState["Repeater1"] = value;
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.Repeater1.DataSource = this.DataSource;
this.Repeater1.DataBind();
}
}
}
}
那么表格的模板就完成了。接下来就是要学会怎么去用这个模板了。
第一步,打开要使用这个表格模板的页面的a.aspx.cs文件,要在里面引用数据库表。(可能有的朋友不需要这一步,那么可以直接看下一步)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using G.Model;
namespace G.Views.bce
{
public partial class a : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
List<表1> list = new List<表1>();
list = 表1.GetList();
this.Master.DataSource = list;
}
}
}
好,引用完成。
第二步,就要在a.aspx中使用了。
<%@ Page Language="C#" MasterPageFile="~/Views/Tables.Master" AutoEventWireup="true" CodeBehind="a.aspx.cs" Inherits="G.Views.bce.a" %>//记得加上MasterPageFile="~/Views/Tables.Master"表示引用Master文件
<%@ MasterType VirtualPath="~/Views/Tables.Master" %>//表示路径
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="TitleContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="TableHeader" runat="server">
<tr>
<th>#</th>
<th>id</th>
<th>姓名</th>
<th style="width: 6em;">操作</th>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="TableLines" runat="server">
<tr class="masterlink">
<td><%# Container.UniqueID.Substring(19) %></td>//由1递增的序号
<td><%#Eval("id")%></td>//<%#Eval("id")%>代表id这个值
<td><%#Eval("name")%></td>
<td style="white-space: nowrap">
<a href="#" title="编辑" onclick="setValue('<%# Eval("id") %>')"><i class="icon-edit"></i></a>
<a href="#static" title="删除" role="button" data-toggle="modal" onclick="getValue(itemno='<%# Eval("id") %>')"><i class="icon-trash"></i></a>
</td>
</tr>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="bottomContent" runat="server">
<script type="text/javascript">
//可以在这里添加函数
function setValue(key) {
var url = "/Views/bce/b.aspx?key=" + key;
$.get(url, function (data) {
$("#mainContent").html(data);
});
}
</script>
</asp:Content>