10、jqueryEasyUI感觉自己还是改行做前端吧

1、jquery的局部方法开发

//首先引入jquery的相关包组件

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/jQuery-plguin.js"></script>

/**
* 扩展jQuery 的一个方法,调用这个方法,我就可以画出表格,表格有多少列,多少行数据...
*/
$(function(){
        $("#datagrid").datagrid({
               columns:[
                      {title:"车次"},
                      {title:"出发站/始发站"},
                      {title:"出发时间/到达时间"},
                      {title:"商务座"},
                      {title:"特等座"},
                      {title:"备注"}
               ], 
               url:"datagrid.json",
               method:"POST"
        })     
})    

/**
**
*/引入的jQuery-plguin.js中的内容
$.fn.extend({
  datagrid:function(object){
    var columns=object.columns;
    var tr="<tr>";
    for(var i=0;i<columns.length;i++){
      tr+="<td>"+columns[i].title+"</td>";
    }
    tr+="</tr>";
    $(this).append(tr);
    $.ajax({
      url:object.url,
      type:object.method,
      success:function(data){
        var rows=data.rows;
        

        for(var i=0;i<rows.length;i++){
          var tr1="<tr>";
          tr1+="<td>"+rows[i].ceci+"</td>";
          tr1+="<td>"+rows[i].startstate+"</td>";
          tr1+="<td>"+rows[i].starttime+"</td>";
          tr1+="<td>"+rows[i].swz+"</td>";
          tr1+="<td>"+rows[i].tdz+"</td>";
          tr1+="<td>"+rows[i].bz+"</td>";
          tr1+="</tr>";

          $("#datagrid").append(tr1);
        }


      }
    })
  }
})

//datagrid.json中的内容
{
    "total":9527,
    "rows":[
        {
            "ceci":"G118",
            "startstate":"北京/青岛",
            "starttime":"9点10分/14点整",
            "swz":"有",
            "tdz":"有",
            "bz":"预定"
        },
        {
            "ceci":"G118",
            "startstate":"北京/青岛",
            "starttime":"9点10分/14点整",
            "swz":"有",
            "tdz":"有",
            "bz":"预定"
        },
        {
            "ceci":"G118",
            "startstate":"北京/青岛",
            "starttime":"9点10分/14点整",
            "swz":"有",
            "tdz":"有",
            "bz":"预定"
        }
        ,
        {
            "ceci":"G118",
            "startstate":"北京/青岛",
            "starttime":"9点10分/14点整",
            "swz":"有",
            "tdz":"有",
            "bz":"预定"
        }
        ,
        {
            "ceci":"G118",
            "startstate":"北京/青岛",
            "starttime":"9点10分/14点整",
            "swz":"有",
            "tdz":"有",
            "bz":"预定"
        }
        ,
        {
            "ceci":"G118",
            "startstate":"北京/青岛",
            "starttime":"9点10分/14点整",
            "swz":"有",
            "tdz":"有",
            "bz":"预定"
        }
        ,
        {
            "ceci":"G118",
            "startstate":"北京/青岛",
            "starttime":"9点10分/14点整",
            "swz":"有",
            "tdz":"有",
            "bz":"预定"
        }
    
    ]


}



原文地址:https://www.cnblogs.com/weizhen/p/5851369.html