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



  • 相关阅读:
    Java中如何解决double和float精度不准的问题
    Linux防火墙Firewall和Iptables的使用
    yum 彻底删除nodejs,重新安装
    hbase集群搭建参考资料
    10分钟教你打造一个微信语音点歌系统
    微信公众平台向特定用户推送消息
    圆角与半角互相转换
    Swagger简单介绍
    测试通过!为何线上还有很多BUG?实践中的质量控制
    AXURE插件在 Chrome 浏览器中用不了怎么办?
  • 原文地址:https://www.cnblogs.com/weizhen/p/5851369.html
Copyright © 2011-2022 走看看