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":"预定"
            }
        
        ]
    
    
    }



  • 相关阅读:
    ansible部署apache
    yum换源,rpm包下载,源码包安装
    zabbix 监控apache
    分块大法 -- 优雅的暴力
    [每日一题]:建立联系 -- 最小生成树
    [每日一题]:P1016 旅行家的预算 -- 反悔贪心
    [每日一题]:[NOIP2010]关押罪犯 -- 并查集
    Python基础: 元组的基本使用
    Python基础: 列表的基本使用
    Python基础:分支、循环、函数
  • 原文地址:https://www.cnblogs.com/weizhen/p/5851369.html
Copyright © 2011-2022 走看看