Jquery EasyUI的添加,修改,删除,查询等基本操作介绍

初识Jquery EasyUI看了一些博主用其开发出来的项目,页面很炫,感觉功能挺强大,效果也挺不错,最近一直想系统学习一套前台控件,于是在网上找了一些参考示例。写了一些基本的增删改查功能,算是对该控件的基本入门。后续有时间继续深入学习。

在学习jquery easyui前应该先到官网下载最新版本http://www.jeasyui.com/download/index.php

先看一下运行后的页面

1、列表展示

Jquery EasyUI的添加,修改,删除,查询等基本操作介绍_第1张图片

2、新增页面

Jquery EasyUI的添加,修改,删除,查询等基本操作介绍_第2张图片

3、修改页面

Jquery EasyUI的添加,修改,删除,查询等基本操作介绍_第3张图片

把jquery easyui下载好之后,一般引用下页几个文件

复制代码 代码如下:


            type="text/css" />
//页面图标样式
   
   
//jquery easyui主要的js
   

首先是列表展示数据

复制代码 代码如下:

        url="http://www.cnblogs.com/GetJson/CreateJson.aspx" toolbar="#toolbar" pagination="true" rownumbers="true"
        fitcolumns="true" singleselect="true">
       
           
               
               
               
               
               
           
       
   

                    编号
               

                    卡名
               

                    密码
               

                    创建时间
               

                    创建人
               

jquery easyui是用datagrid对数据进行展示的,所以class要选择easyui-datagrid;url是本列表的一个json格式的数据来源toobar后面跟着的"#toobar"是列表的一个工具栏,本示例在列表上显示的是添加,修改,删除功能按钮对数据进行操作。pagination是否显示分页,rownumbers显示行数,分页时向后台传去两个参数,一个就是当前页数另一个就是每页显示行数;fitcolumns:自适应列宽;singleselected:单选。
工具条代码

复制代码 代码如下:

数据源格式

Jquery EasyUI的添加,修改,删除,查询等基本操作介绍_第4张图片

数据源添加弹出框

复制代码 代码如下:

       closed="true" buttons="#dlg-buttons">
      

           信息编辑
      

      

      

          
          
      

      

          
          
      

      

          
          
      

      

          
          
      

      

          
          
      

      
      
      

  

?


        保存
                    iconcls="icon-cancel">取消
   

注:class为弹出框类型;closed:当前显示状态为隐藏;buttons:弹出框的功能按钮;

对弹出的添加页面添加样式

复制代码 代码如下:

?

 js实现对数据的添加修改删除

复制代码 代码如下:

   

你可能感兴趣的:(Jquery EasyUI的添加,修改,删除,查询等基本操作介绍)