zoukankan      html  css  js  c++  java
  • 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":"预定"
            }
        
        ]
    
    
    }



  • 相关阅读:
    swoole入门abc
    PHP实现定时任务(非linux-shell方式,与操作系统无关)
    PHP经典算法题
    lumen使用CORS解决跨域问题
    轻松搞定 JS 的this、call和apply
    Nginx与PHP工作原理
    PHP的cURL扩展库使用详解
    PHP 中的 cURL 爬虫实战基础
    jvm误区--动态对象年龄判定
    从源码分析如何优雅的使用 Kafka 生产者
  • 原文地址:https://www.cnblogs.com/weizhen/p/5851369.html
Copyright © 2011-2022 走看看