zoukankan      html  css  js  c++  java
  • 开发一个可绑定数据源的jQuery数据表格插件

    开发一个可绑定数据源的jQuery数据表格插件

     

    上一篇博文写道:用javascript实现Repeater.

    此文将实现一个的jQuery表格插件jQuery.DataGrid。

    1. 固定表头
    2. 列宽可调整
    3. 单击列头可排序
    4. 双击单元格可编辑
    5. 可绑定数据源

     看下效果吧:

     

     HTML - 模板代码:

    <table  id="test">
                    <tr  class="header">
                            <td  style=" 100px;"  sort='true'>
                                    姓名
                            </td>
                            <td  style=" 100px;"  sort='true'>
                                    性别
                            </td>
                            <td  style=" 100px;"  sort='true'>
                                    年龄
                            </td>
                            <td  style="200px;"  sort='true'>
                                    住址
                            </td>
                    </tr>
                    <tr  class="itemtemplate">
                            <td  editable='true'> 
                                {姓名}
                            </td>
                            <td  editable='true'>
                                {性别}
                            </td>
                            <td  editable='true'> 
                                {年龄}
                            </td>
                            <td  editable='true'> 
                                {住址}
                            </td>
                    </tr>
            </table>

     

     jsascript代码:

    //测试数据
    var  dataJsonStr='{tablename:"",rows:[{"姓名":"曹操","性别":"","年龄":"51","住址":"许昌"},{"姓名":"诸葛亮","性别":"","年龄":"40","住址":"南阳"},{"姓名":"周瑜","性别":"","年龄":"40","住址":"江东"},{"姓名":"大乔","性别":"","年龄":"30","住址":"江东"},{"姓名":"小乔","性别":"","年龄":"28","住址":"江东"},{"姓名":"曹操","性别":"","年龄":"51","住址":"许昌"},{"姓名":"诸葛亮","性别":"","年龄":"40","住址":"南阳"},{"姓名":"周瑜","性别":"","年龄":"40","住址":"江东"},{"姓名":"大乔","性别":"","年龄":"30","住址":"江东"},{"姓名":"小乔","性别":"","年龄":"28","住址":"江东"}]}';

    //清空数据
    $('#test').DataGridClear();
    //设定行样式
    $('#test').DataGridSetItemClass("tr1","tr2","trhover");
    //绑定数据,并设置宽度高度
    $('#test').DataGrid("100%",200,dataJsonStr);

     

     结构示意图:

    如何根据HTML模板创建DataGrid整个结构?

    1.首先创建 表头 主体 等各区域:

       TableBody.addClass('TableBody'); 
       TableBody.wrap("<div id='"+MyTableId+"' class='houfeng-table'></div>"); 
       var  MyTable=$('#'+MyTableId); 
       TableBody.data('MyTable',MyTable); 
       TableBody.before("<table class='TableHead' ></table>"); 
       var  TableHead=MyTable.find(".TableHead"); 
       TableBody.data('TableHead',TableHead); 
       TableBody.wrap('<div  class="TableBodyArea"></div>'); 
       TableHead.wrap("<div class='TableHeadArea' onselectstart='return false;'></div>"); 
       var  TableBodyArea=MyTable.find('.TableBodyArea'); 
       var  TableHeadArea=MyTable.find('.TableHeadArea'); 
       TableBody.data('TableBodyArea',TableBodyArea); 
       TableBody.data('TableHeadArea',TableHeadArea);

    上面代代中红色高亮 TableBody 为表主体, TableHead 为表头

    2.创建表头

    TableBody.find('.header').clone().prependTo(TableHead);

    TableBody 其实便是HTML模板Table , 将  .header 的行移到到表头表格中作为表头.

    3.创建表主体

    创建表主体,其实便是根据数据源及模板 循环创建每一行 , 这里用了 上篇文章提到的 Repeater 来创建, 详细 请看用javascript实现Repeater.

    4.处理当列过多时横向滚动条的问题

    TableBodyArea.scroll(function  (){
                                    var  ml=0-parseInt(TableBodyArea.attr('scrollLeft'));
                                    TableHead.css('margin-left',ml);
    });

    TableBodyArea 为TableBody外包裹的一个Div

    5.如何实现单元格编辑

    双击td时在td中动态插入一个文件本框为将td的innerHTML给文本框,在文本焦点失去时,将文本框值赋给td的innerHTML,将移除文本框 代码如下:

                            TableBody.find('td').live('dblclick',function(){
                                    var  td=$(this);
                                    if(td.attr('editable')=='true')
                                    {
                                              var  text=td.text();
                                              var  html="<input type='text' class='TdEditTextBox' value='"+$.trim(text)+"' />";
                                              td.html(html);
                                              td.addClass("tdediting");
                                              //
                                              $(this).find('.TdEditTextBox').focus().focus().focus().focus();
                                              $(this).find('.TdEditTextBox').blur(function(){
                                                    var  val=$(this).val();
                                                    td.html(val);
                                                      td.removeClass("tdediting");
                                              });
                                      }
                            });

    6. 如何排序:

     由时间问题请容我下回分解!!

     

    源码下载:

          请遵守 LGPL英文 LGPL中文 协议!  下载.

     

     

  • 相关阅读:
    English 2
    速算24点
    心理学1
    从微服务到函数式编程
    034 01 Android 零基础入门 01 Java基础语法 04 Java流程控制之选择结构 01 流程控制概述
    033 01 Android 零基础入门 01 Java基础语法 03 Java运算符 13 运算符和表达式知识点总结
    032 01 Android 零基础入门 01 Java基础语法 03 Java运算符 12 运算符和if-else条件语句的综合案例——闰年问题
    031 01 Android 零基础入门 01 Java基础语法 03 Java运算符 11 运算符的优先级
    030 01 Android 零基础入门 01 Java基础语法 03 Java运算符 10 条件运算符
    029 01 Android 零基础入门 01 Java基础语法 03 Java运算符 09 逻辑“非”运算符
  • 原文地址:https://www.cnblogs.com/houfeng/p/1779121.html
Copyright © 2011-2022 走看看