jTable基础知识：画表格之前要做的事

最新推荐文章于 2023-05-16 17:08:15 发布

lolipusher

最新推荐文章于 2023-05-16 17:08:15 发布

阅读量541

点赞数

分类专栏： 2016实习笔记文章标签：读书笔记 jtable

本文链接：https://blog.csdn.net/lolipusher/article/details/52765701

版权

2016实习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

jQuery jTable
- 起手式
- 建立jTable的javascript代码
  - 定义

jQuery jTable

上周补充了一些关于jQuery的基础背景知识，现在来了解一下jTable这个基于jQuery的插件。

典型的AjaxCRUD表——jTable

起手式

jTable的必备js，css需要import到对应的jsp中
在jsp中，插入jTable的地方预留一个空<div>
<div id= "MyTableContainer" ></div>
然后，插入一段js代码

建立jTable的javascript代码

 
          <script type= 
          "text/javascript" 
          > 
         
          $(document).ready(function () {          
         
          $( 
          '#MyTableContainer' 
          ).jtable({ 
         
          //通用属性 
         
          actions: { 
         
          //操作定义 
         
          }, 
         
          fields: { 
         
          //列属性定义 
         
          } 
         
          //事件处理 
         
          });      
         
          }); 
         
          </script>

定义

通用属性

这里是一些全局的属性。比如是否分页，每页记录数量，排序方式等等

操作属性

定义服务器与客户端浏览器之间的交互

action一共有四种

listAction
createAction
updateAction
deleteAction

分别对应了显示（查找项目），增加项目，更新项目，删除项目即CRUD

没有listAction的话，jTable只会建立一个空表格

列属性

和关系数据库中记录所拥有的列对应，包含显示的一些属性，标题等

例如：title，width，create，edit，display，options等等

事件处理

诸如建立记录，删除记录，载入记录等事件以及对应的响应

jQuery jTable
- 起手式
- 建立jTable的javascript代码
  - 定义

jQuery jTable

上周补充了一些关于jQuery的基础背景知识，现在来了解一下jTable这个基于jQuery的插件。

典型的AjaxCRUD表——jTable

起手式

jTable的必备js，css需要import到对应的jsp中
在jsp中，插入jTable的地方预留一个空<div>
<div id= "MyTableContainer" ></div>
然后，插入一段js代码

建立jTable的javascript代码

 
           <script type= 
           "text/javascript" 
           > 
          
           $(document).ready(function () {          
          
           $( 
           '#MyTableContainer' 
           ).jtable({ 
          
           //通用属性 
          
           actions: { 
          
           //操作定义 
          
           }, 
          
           fields: { 
          
           //列属性定义 
          
           } 
          
           //事件处理 
          
           });      
          
           }); 
          
           </script>