微信小程序--后端管理平台8页面json数据显示

来源：互联网发布：相对湿度数据编辑：程序博客网时间：2024/05/23 23:42

前台接受到数据后，json格式在html上的显现。

主要是通过向页面写html代码。然后关于修改按钮传该条信息得的id给服务端，mark下

参考文献：

http://ask.csdn.net/questions/270833

代码如下：

<!DOCTYPE html><html><head><script src="webjars/jquery/3.1.1/jquery.min.js"></script><script src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script><script>    function userbupdate(obj) {      var test = $(obj).attr("id");        alert(test);        $.ajax({            url : "userb/update", //这里是静态页的地址            type : "GET", //静态页用get方法，否则服务器会抛出405错误data:{"id" : test},            success : function(data) {                //var result = $(data).find("另一个html页面的指定的一部分");                $("#content").html(data);            }        });    }    var pageNum = 1;    var pageSize = 0;    var total = 0;    var pages = 0;    var prePage = 0;    var nextPage = 2;    var isFirstPage = true;    var isLastPage = false;    var hasPreviousPage =false;    var hasNextPage = true;    var firstPage = 1;    var lastPage = 1;    $().ready(        getPageInfo()    )    function getPageInfo() {        $.ajax({            url : "userb/userbpageinfo",            data : {                "page" : pageNum            },            dataType : "json",            success : function(data) {                pageNum = data.pageNum;                pageSize = data.pageSize;                total = data.total;                pages = data.pages;                prePage = data.prePage;                nextPage = data.nextPage;                isFirstPage = data.isFirstPage;                isLastPage = data.isLastPage;                hasPreviousPage = data.hasPreviousPage;                hasNextPage = data.hasNextPage;                firstPage = data.firstPage;                lastPage = data.lastPage;                //清空表格                $("#tablepage").html("");                var table = '<table class="table table-borderd table-striped table-hover col-lg-10">'                    + '<tr class="">'                    + "<th>序号</th>"                    + "<th>用户id</th>"                    + "<th>微信号</th>"                    + "<th>名称</th>"                    + "<th>学号</th>"                    + "<th>操作</th>" + "</tr>";                var i = 1;                $.each(                    data.list,                    function(key, value) {                        var item = "<tr><td>"                            + i                            + "</td><td>"                            + value.id                            + "</td><td>"                            + value.wxid                            + "</td><td>"                            + value.name                            + "</td>"                            + "<td>"                            + value.scid                            + "</td><td><button>查看详细信息</button>" +"<button>删除</button>" +'<button  id ="'+ value.id+'" onclick="userbupdate(this)">修改</button>' +"</td></tr>";                        table += item;                        i += 1;                    })                table += "</table>";                $("#tablepage").append(table)            },            error : function(msg) {            }        })    }    function getPage(page){        if(page==1){            if(isLastPage)return false;            pageNum = pageNum+1;        }else if(page==-1){            if(isFirstPage)return false;            pageNum = pageNum-1        }        getPageInfo();    }//function getPage    function getFirstPage(){        if(isFirstPage)return false;        pageNum = firstPage;        getPageInfo();    }    function getLastPage(){        if(isLastPage)return false;        pageNum = lastPage;        getPageInfo();    }</script><link rel="stylesheet" href="webjars/bootstrap/3.3.5/css/bootstrap.min.css" />  <meta charset="UTF-8"/><title>Insert title here</title></head><body><div class="page-header">    <h1>用户基本信息管理内容</h1></div><div id="tablepage"></div><div class="row"><div class="col-md-offset-4"><ul class="pagination"><li><a href="#">«</a></li><li><a href="#" onclick = "getFirstPage()">第一页</a></li><li><a href="#" onclick = "getPage(-1)">上一页</a></li><li><a href="#" onclick = "getPage(1)">下一页</a></li><li><a href="#" onclick = "getLastPage()">最后一页</a></li><li><a href="#">»</a></li></ul></div></div><!--<table class=" table table-borderd table-striped table-hover col-lg-10"><tr class=""><th>序号</th><th>用户id</th><th>微信号</th><th>名称</th><th>学号</th><th>操作</th></tr><tr th:each="user,iterStat : ${users} "><td th:text="${iterStat.count}"></td><td th:text="${user.id}"></td><td th:text="${user.wxid}"></td><td th:text="${user.name}"></td><td th:text="${user.scid}"></td><td><button>查看详细信息</button><button>删除</button><button  th:id ="${user.id}" onclick="userbupdate(this)">修改</button></td></tr></table>--></body></html>

最关键得地方：

  + "</td><td><button>查看详细信息</button>" +"<button>删除</button>" +'<button  id ="'+ value.id+'" onclick="userbupdate(this)">修改</button>' +"</td></tr>";                        table += item;                        i += 1;

阅读全文

0 0