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



  • 相关阅读:
    UIImage的使用
    UIImageVIew的使用
    关于View和VIewController的关系和理解
    ZT Android 4.2蓝牙介绍
    2013深秋红土地旅行计划之井冈山
    系统性能优化
    Reorder List
    Word Break II
    iOS.CocoaPods.0
    Python 知识要点:案例:士兵突击
  • 原文地址:https://www.cnblogs.com/weizhen/p/5851369.html
Copyright © 2011-2022 走看看