zoukankan      html  css  js  c++  java
  • js 从一个json拼接成另一个json,并做json数据分页table展示

    先给数据:

    //原始json数据
    json = [{"id":"1","aid":"013","performanceperson":"668","customername":"u6cb3u5357u4ebauff0cu4e0du77e5u540d","customerphone":"13013013000","company":"u6731u5f69u4e91","remarks":"u9700u8981","createtime":"2015-11-14 11:06:17"}, {"id":"1","aid":"013","performanceperson":"668","customername":"u6cb3u5357u4ebauff0cu4e0du77e5u540d","customerphone":"13013013000","company":"u6731u5f69u4e91","remarks":"u9700u8981","createtime":"2015-11-14 11:06:17"} {"id":"1","aid":"013","performanceperson":"668","customername":"u6cb3u5357u4ebauff0cu4e0du77e5u540d","customerphone":"13013013000","company":"u6731u5f69u4e91","remarks":"u9700u8981","createtime":"2015-11-14 11:06:17"} {"id":"1","aid":"013","performanceperson":"668","customername":"u6cb3u5357u4ebauff0cu4e0du77e5u540d","customerphone":"13013013000","company":"u6731u5f69u4e91","remarks":"u9700u8981","createtime":"2015-11-14 11:06:17"} {"id":"1","aid":"013","performanceperson":"668","customername":"u6cb3u5357u4ebauff0cu4e0du77e5u540d","customerphone":"13013013000","company":"u6731u5f69u4e91","remarks":"u9700u8981","createtime":"2015-11-14 11:06:17"} {"id":"1","aid":"013","performanceperson":"668","customername":"u6cb3u5357u4ebauff0cu4e0du77e5u540d","customerphone":"13013013000","company":"u6731u5f69u4e91","remarks":"u9700u8981","createtime":"2015-11-14 11:06:17"} {"id":"1","aid":"013","performanceperson":"668","customername":"u6cb3u5357u4ebauff0cu4e0du77e5u540d","customerphone":"13013013000","company":"u6731u5f69u4e91","remarks":"u9700u8981","createtime":"2015-11-14 11:06:17"} {"id":"1","aid":"013","performanceperson":"668","customername":"u6cb3u5357u4ebauff0cu4e0du77e5u540d","customerphone":"13013013000","company":"u6731u5f69u4e91","remarks":"u9700u8981","createtime":"2015-11-14 11:06:17"} {"id":"1","aid":"013","performanceperson":"668","customername":"u6cb3u5357u4ebauff0cu4e0du77e5u540d","customerphone":"13013013000","company":"u6731u5f69u4e91","remarks":"u9700u8981","createtime":"2015-11-14 11:06:17"} {"id":"1","aid":"013","performanceperson":"668","customername":"u6cb3u5357u4ebauff0cu4e0du77e5u540d","customerphone":"13013013000","company":"u6731u5f69u4e91","remarks":"u9700u8981","createtime":"2015-11-14 11:06:17"} {"id":"1","aid":"013","performanceperson":"668","customername":"u6cb3u5357u4ebauff0cu4e0du77e5u540d","customerphone":"13013013000","company":"u6731u5f69u4e91","remarks":"u9700u8981","createtime":"2015-11-14 11:06:17"} ]; //预定义空 准备用于存放新拼接的json var Datatable = ' '; //新json数据的表头 var columns = [{"cid":"customername","ctext":"客户名字"},{"cid":"customerphone","ctext":"客户电话"},{"cid":"company","ctext":"客服/公司"},{"cid":"performanceperson","ctext":"销售"},{"cid":"createtime","ctext":"创建时间"},{"cid":"remarks","ctext":"备注"},{"cid":"edit","ctext":"操作"}];

    主体ajax 获取数据---thinkphp 3.1.3

    //获得全部客户信息
    function getall()
    {
        var ajaxurl = '/app/index.php/Customerinfos/handler';
        $.post(ajaxurl,{},function(data){
                data=getnewjson(data);
                $('#result').html(setcustomerinfoallsplitPage(json));
                tableData = getnewjson(json);
                //tableData = JSON.stringify(json);  //json转换为字符串
                splitPage(1,10);
        },'json');
        $("#wd").attr("disabled", 'true');
        $("#phone").attr("disabled", 'true');
        $("#company").attr("disabled", 'true');
    }
    setcustomerinfoallsplitPage(json)
    function setcustomerinfoallsplitPage(json)
    {
        if(json == null || json == undefined || json == '')
        {
            return "返回值为空!";
        }
        var html = "<table class='imagetable' id='tb'>";
        html+="<tr><th>客户名字</th><th>客户电话</th><th>客服/公司</th><th>销售</th><th>创建时间</th><th>备注</th><th>操作</th></tr>";
        for(i=0;i<json.length;i++){
            html+="<tr align='center'>";
            html+="<td>"+json[i].customername+"</td><td>"+json[i].customerphone+"</td><td>"+json[i].company+"</td><td>"+json[i].performanceperson+"</td><td>"+json[i].createtime+"</td><td>"+json[i].remarks+"</td><td><nobr><input type='button' id='edit' value='编辑' onclick='javascript:edit_customerphone("+json[i].customerphone+");' /><input type='button' id='delete' value='删除' onclick='javascript:delete_customerphone("+json[i].customerphone+");'  /></nobr></td>";
            html+="</tr>";
        }
        html+="</table><hr style='position:absolute;1425px;heigth:30px;top:530px;'><div style='position:absolute;1425px;heigth:30px;top:550px;' id='page_bar' align='center'></div><hr style='position:absolute;1425px;heigth:30px;top:570px;'>";
        return html;
    }

    拼接新的json

    //截取json并拼接新的json
    function getnewjson(json)
    {
        if(json == null || json == undefined || json == '')
        {
            return null;
        }
        var obj = [];
        for(var i=0;i<json.length;i++) {
            var customer = {};
           customer.customername = json[i].customername;
           customer.customerphone= json[i].customerphone;
           customer.company = json[i].company;
           customer.performanceperson = json[i].performanceperson;
           customer.createtime = json[i].createtime;
           customer.remarks = json[i].remarks;
           customer.edit = "<nobr><input type='button' id='edit' value='编辑' onclick='javascript:edit_customerphone("+json[i].customerphone+");' /><input type='button' id='delete' value='删除' onclick='javascript:delete_customerphone("+json[i].customerphone+");'/></nobr>";
           obj.push(customer);
        }
        return obj;
    }

    json 数据分页

    /**
    page:页码
    pageSize:每页的记录条数
    此方法除了传入page和pageSize之外,还应知道的有三个参数:
    一、表的全部数据,json串格式,可通过action查询数据库得到。
    二、表头所对应的列的key及名称,也是json串格式
    三、表所对应的id
    注:此处只是适合表头只有一行,且事先写好的情况。您可以根据需要改一下,逻辑思路就是这样,欢迎批评指正。
    */
    function splitPage(page,pageSize)
    {
    /*    if(Object.prototype.toString.call(tableData) === "[object String]"){  //判断是否为字符串    
            var json=JSON.parse(tableData); //字符串转化为json
        }*/
        var ptable = document.getElementById("tb");  //获取表格对象
        var num = ptable.rows.length;//table.rows返回表格中包含的所有行,此处假设表由表头1行和表体N行组成
        //alert(num);
        //清除tbody
        for(var i=num-1;i>0;i--)
        {
            ptable.deleteRow(i);
        }
        var totalNums = tableData.length;//总行数
        var totalPage = Math.ceil(totalNums/pageSize);//总页数
        var begin = (page-1)*pageSize;//页起始位置(包括)
        var end = page*pageSize;//页结束位置(不包括)
        end = end>totalNums?totalNums:end;
        //向tbody中写入数据
        var n = 1;//tbody的起始行
        for(var i=begin;i<end;i++)
        {
            var row = ptable.insertRow(n++);
            var rowData = tableData[i];
            for(var j=0;j<columns.length;j++)
            {
                var col = columns[j].cid;
                var cell = row.insertCell(j);
                var cellData = rowData[col];
                cell.innerHTML = cellData;
            }
        }
        //生成分页工具条
        var pageBar = "第"+page+"页/共"+totalPage+"页"+" ";
        if(page>1)
        {
            pageBar += "<a href='javascript:splitPage("+1+","+pageSize+");'>首页</a> ";
        }
        else
        {
            pageBar += "首页 ";
        }
        
        if(page>1)
        {
            pageBar += "<a href='javascript:splitPage("+(page-1)+","+pageSize+");'>上一页</a> ";
        }
        else
        {
            pageBar += "上一页 ";
        }
        if(page<totalPage)
        {
            pageBar += "<a href='javascript:splitPage("+(page+1)+","+pageSize+");'>下一页</a> ";
        }
        else
        {
            pageBar += "下一页 ";
        }
        if(page<totalPage)
        {
            pageBar += "<a href='javascript:splitPage("+(totalPage)+","+pageSize+");'>尾页</a> ";
        }
        else
        {
            pageBar += "尾页 ";
        }
        $('#page_bar').html(pageBar).show();
    }

    完工~~~~

  • 相关阅读:
    TreeList 树形控件 实现带三种状态的CheckBox
    SQL 左外连接,右外连接,全连接,内连接(转)
    在DataTable中进行数据查询 (转)
    uva10594 Data Flow最小费用流,两个代码区别不大(我没看出区别),为什么一个对,另一个超时!!
    SGU142 Keyword好题
    uva 10881
    南京理工1747(数论)WA了好多遍!
    CF161D 树形dp
    uva 11646(大水题几何分类)
    求a加到b二进制加法有多少次进位。
  • 原文地址:https://www.cnblogs.com/GaoAnLee/p/4971566.html
Copyright © 2011-2022 走看看