万金流
初次使用博客园,目前感觉还不错。 不知不觉用了4年零4个月了,越来越喜欢博客园。

本项目由普通mvc+webapi接口构成。
按执行顺序,代码如下:
主控制器:
public ActionResult Index(int id=0)
{
ViewData["myid"] = id;
return View();
}

前台关键代码(layui):
<table id="demo" lay-filter="test"></table>
<script src="~/layui/layui.js"></script>
<script>
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#demo'
, height: 500
, url: '/api/data/?id=@ViewData["myid"].ToString()'
, cols: [[
{ field: 'xxx', title:XXX, fixed: 'left', align: 'center' }
, { field: 'xxx', title: 'XXX', width: 200, align: 'center', templet: '<div>[{{d.class_name}}]</div>' }
]]
, page: {
layout: ['first', 'prev', 'page', 'next', 'last']
, limits: [10]
, groups: 6
, first: 'first'
, last: 'last'
, theme:'#FF0000'
}
});
});
</script>

Webapi控制器代码:
public HttpResponseMessage getdata(int id = 0,int page=1,int limit=10)
{
DataTable dt;
int c;
Article myarticles = new Article(id);
dt = myarticles.get_Articles_by_id(page,limit,out c);
return Layui_Helper.get_Layui_table(dt,c);
}

Article类代码:
public class Article
{
int class_id;
public Article(int a=0)
{
class_id = a;
}
//根据初始化的id,送入分页信息(当前所在页,每页记录条数),获得当前页datatable和总记录条数count
public DataTable get_Articles_by_id(int page,int limit,out int count)
{
DataTable dt;
string sql;
count = 1;
if (class_id != 0)
{
Hc_db1.set_Para("cid", class_id);
sql = "SELECT XXX from OOO where TTT=@cid order by b_date desc , ID desc";
Hc_db1.set_comm(sql);
dt = Hc_db1.get_datatable();
}
else
{
sql = "SELECT XXX from OOO order by b_date desc , ID desc";
dt = Hc_db.get_datatable(sql);
}
//计数,删除分页不需要的行
count = dt.Rows.Count;
for (int i = dt.Rows.Count - 1; i >= 0; i--)
{
if (i <(page - 1) * limit || i >= page * limit)
{
dt.Rows.RemoveAt(i);
}
}
return dt;
}
}

把datatable转换为layui格式的类:
public class Layui_Helper
{
static string datatable2json(DataTable table)
{
StringBuilder jsonBuilder = new StringBuilder();
jsonBuilder.Append("\"data\":[");
for (int i = 0; i < table.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = 0; j < table.Columns.Count; j++)
{
jsonBuilder.Append("\"");
jsonBuilder.Append(table.Columns[j].ColumnName);
jsonBuilder.Append("\":\"");
jsonBuilder.Append(table.Rows[i][j].ToString());
jsonBuilder.Append("\",");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("},");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("]");
return jsonBuilder.ToString();
}
//送入一个datatable,返回一个layui支持的表格字符串(HttpResponseMessage格式)
public static HttpResponseMessage get_Layui_table(DataTable dt, int count = 0, int status = 0)
{
StringBuilder s = new StringBuilder();
HttpResponseMessage responseMessage;
if (count == 0)
{
count = dt.Rows.Count;
}
s.Append("{\"code\":");
s.Append(status.ToString() + ",");
s.Append("\"count\":");
s.Append(count.ToString() + ",");
s.Append(datatable2json(dt));
s.Append("}");
responseMessage = new HttpResponseMessage { Content = new StringContent(s.ToString(), Encoding.GetEncoding("UTF-8"), "text/plain") };
return responseMessage;
}
}

posted on 2019-11-26 08:01  万金流  阅读(429)  评论(0编辑  收藏  举报