EasyUI 学习笔记

EasyUI 学习笔记

1．class="easyui-datagrid" 用于列表展示

2．注释：图中有标有绿色字体的是在图片中显示的图片的样式，比如添加，删除，修改，保存，取消。

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

引入样式代码如下:

type="text/css" />

//页面图标样式

//jquery easyui主要的js

列表展示数据

代码如下:

url="/GetJson/CreateJson.aspx" toolbar="#t oolbar" pagination="true" rownumbers="true"

fitcolumns="true" singleselect="true">

编号	卡名	密码	创建时间	创建人

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

工具条代码

代码如下:

plain="true">添加

onclick="edituser()" plain="true">修改

ef="javascript:void(0)" class="easyui-linkbutton"

iconcls="icon-remove" plain="true">删除< /a>

添加弹出框：

在添加弹出框内容中，有一个class=”easy-dialog”, 这个对话框（dialog）是一个特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。默认情况下，对话框（dialog）只有一个显示在头部右侧的关闭工具。用户可以配置对话框行为来显示其他工具（比如：可折叠collapsible、可最小化minimizable、可最大化maximizable，等等）。

具体参考开发文档，如下图：

添加数据弹出框代码如下：

数据源添加弹出框

复制代码代码如下:

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

信息编辑

编号

卡号

密码