Webservice返回数据渲染到Layui的table控件

Webservice返回的数据格式

{
  "errcode": 0,
  "errmsg": "",
  "list": [
    {
      "cardno": "A01",
      "name": "Ava",
      "type": "A"
    },
    {
      "cardno": "A02",
      "name": "Elio",
      "type": "B"
    },
    {
      "cardno": "A03",
      "name": "kendall",
      "type": "C"
    },
    {
      "cardno": "A04",
      "name": "",
      "type": "A"
    }
  ]
}

具体实现思路：

1.接收webservice返回的数据

2.通过 JObject  转成json格式

3.定义全局变量，将json数据赋值给全局变量

4.将所定义的全局变量传到前端

5.前端将string转换为json

5.table绑定json的标识符进行渲染

这里是cs页面的代码

using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using System;
public partial class index : System.Web.UI.Page
{
    #region 全局变量
    //传递查询返回的string
    public string personData;
    //实例化webservice meal接口
    WebReference.meal meal = new WebReference.meal();
    #endregion

    #region 页面加载
    protected void Page_Load(object sender, EventArgs e)
    {
        //页面首次加载显示数据
        string nullcode = null;
        string result = meal.getAllSpecial(nullcode);
        JObject personjson = (JObject)JsonConvert.DeserializeObject(result);
        personData = personjson["list"].ToString();
    }
    #endregion

    #region 搜索按钮
    protected void Button1_Click(object sender, EventArgs e)
    {
        
        string code = Request["code"].ToString();
        string result = meal.getAllSpecial(code);
        JObject personjson = (JObject)JsonConvert.DeserializeObject(result);    
        //对返回的json数据判断，如果非空则返回相应数据，空则返回错误信息
        if (personjson["errcode"].ToString().Equals("0"))
        {
            personData = personjson["list"].ToString();
        }
        else
        {
            Response.Write("<script>alert('添加失败，原因：" + personjson["errmsg"] + "')</script>");
        }
    }
    #endregion
}

这是前端具体渲染部分，asp页面

layui不用url赋值，改用data赋值

<asp:Table runat="server" ID="demo" lay-filter="test" ></asp:Table>

 <%-- javascript 脚本--%>
        <script>
            layui.use('table', function () {
                var table = layui.table;
        //将string转换为json
                var res = eval(<%=personData%>);
        //第一个实例
        table.render({
            elem: '#demo'
            , width: 600
            , height: 700
            , title: '特殊金额用户表'//表标题
            , toolbar: 'default' //开启工具栏
            , data: res //数据接口
            , limit: 20
            , page: true //开启分页
            , cols: [[ //表头
                { field: 'cardno', title: '工号', width: 80, sort: true, fixed: 'left' }
                , { field: 'name', title: '姓名', width: 100 }
                , { field: 'type', title: '金额类型', width: 80, sort: true }
            ]]
        });
    });
        </script>        

标签：控件,Webservice,Layui,json,cardno,table,personjson,meal,string
来源： https://www.cnblogs.com/linyeming/p/16317064.html