通过异步交换的json数据无法作为layui 的 数据表格数据源

提问 已结 4 212
简单纯粹
简单纯粹 2019-6-12
悬赏:20飞吻
版本:layui 浏览器:
如果我把返回回来的json数据作为文件绑定带url上就可以显示 但是分页不会刷新

页面代码如下


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LayuiTest</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="layui.css" rel="stylesheet" />
<script src="../jquery-1.8.3.min.js"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
</head>
<body>
<table class="layui-hide" id="test"></table>
<script src="../layui.all.js"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
<script>

$(function () {
$.ajax({
type: "get",//请求的方式 get post
dataType: "json",//返回数据类型
url: "Helper.ashx",//一般处理程序路径
data: {
Method: "GetTableLayui",
//所有前端向后台传递参数,都要写在这里面
}, success: function (data) { //这个时候我们返回的参数就是json对象了

alert(data);

layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#test'
, url: ''
, parseData: function (data) { //res 即为原始返回的数据
return {
"code": res.status, //解析接口状态
"msg": res.message, //解析提示文本
"count": res.total, //解析数据长度
"data": res.data.item //解析数据列表
};
}
, cols: [[
{ field: 'id', title: 'ID', sort: true }
, { field: 'name', title: '名字' }
, { field: 'price', title: '价格', sort: true }
]]
, page: true
});
});
}
});

})
</script>

</body>
</html>
一般处理程序的代码如下
<%@ WebHandler Language="C#" Class="Helper" %>

using System;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Newtonsoft.Json;
using System.Data;
using System.Data.Sql;
using System.Data.SqlClient;

public class Helper : IHttpHandler {

public void ProcessRequest (HttpContext context) {
string method = context.Request["Method"];
if (method == "GetTable") {
string sql = "select * from table1";
SelectInfo(context, sql);
}

}




//从数据库中获取表格数据
public static void SelectInfoLayui(HttpContext context, string sql)
{
string sqlconn = "Data Source=.;Initial Catalog=testForTable;Integrated Security=True";
//创建查询的方法将返回的表格转化为json格式
SqlConnection conn = new SqlConnection(sqlconn);
//创建要给查询的字符串
SqlCommand cmd = new SqlCommand(sql, conn);
DataSet ds = new DataSet();
SqlDataAdapter dap = new SqlDataAdapter(cmd);
dap.Fill(ds);
//查询数据库的代码
string json = "";
json += "{ \"status\": 0, \"message\": \"\", \"total\": 180, \"data\": { \"item\":";
json += JsonConvert.SerializeObject(ds.Tables[0]); //强制转换json,返回的是一个数据集
json += "}}";
context.Response.Write(json);
}

public bool IsReusable {
get {
return false;
}
}

}
回帖
  • Ja12
    2019-6-12
    data	Array	直接赋值数据。既适用于只展示一页数据,也非常适用于对一段已知数据进行多页展示。	[{}, {}, {}, {}, …]
    https://www.layui.com/doc/modules/table.html#options
    应该使用data这个属性来
    0 回复
  • 通过一般处理程序里的ADO.NET 返回的数据通过 JSON.DLL 文件转化的数据返回
    0 回复
  • @MP爱好者 已经解决 , 之前一直想要使用

    parseData 这个参数而导致的错误,兜兜转转弄了半天 谢谢大佬,一语点醒梦中人
    0 回复
  • 直接这样书写就可以了



    0 回复