EasyUI学习笔记讲述.doc

EasyUI 学习笔记 class=easyui-datagrid 用于列表展示 注释：图中有标有绿色字体的是在图片中显示的图片的样式，比如添加，删除，修改，保存，取消。 把jquery easyui下载好之后，一般引用下页几个文件 引入样式 代码如下: link href=/Resources/easyui/css/default.css rel=stylesheet type=text/css /??? link href=/Resources/easyui/js/themes/default/easyui.css rel=stylesheet??????? type=text/css ///页面图标样式??? link href=/Resources/easyui/js/themes/icon.css rel=stylesheet type=text/css /??? script src=/Resources/easyui/js/jquery-1.7.2.min.js type=text/javascript/script//jquery easyui主要的js??? script src=/Resources/easyui/js/jquery.easyui.min.js type=text/javascript/script 列表展示数据 代码如下: table id=dg title=My Users class=easyui-datagrid style=width: 700px; height: 250px??????? url=/GetJson/CreateJson.aspx toolbar=#toolbar pagination=true rownumbers=true??????? fitcolumns=true singleselect=true??????? thead??????????? tr??????????????? th field=AccountCode width=50??????????????????? 编号??????????????? /th??????????????? th field=AccountName width=50??????????????????? 卡名??????????????? /th??????????????? th field=AccountPwd width=50??????????????????? 密码??????????????? /th??????????????? th field=CreateTime width=50??????????????????? 创建时间??????????????? /th??????????????? th field=CreateName width=50??????????????????? 创建人??????????????? /th??????????? /tr??????? /thead??? /table jquery easyui是用datagrid对数据进行展示的，所以class要选择easyui-datagrid；url是本列表的一个json格式的数据来源toobar后面跟着的#toobar是列表的一个工具栏，本示例在列表上显示的是添加，修改，删除功能按钮对数据进行操作。pagination是否显示分页，rownumbers显示行数，分页时向后台传去两个参数，一个就是当前页数另一个就是每页显示行数；fitcolumns：自适应列宽；singleselected:单选。 工具条代码 代码如下: div id=toolbar??????? a href=javascript:void(0) class=easyui-linkbutton iconcls=icon-add onclick=newuser()??????????? plain=true添加/a a href=javascript:void(0) class=easyui-linkbutton iconcls=icon-edit??????????????? onclick=edituser() plain=true修改/a a href=javascript:void(0) class=easyui-linkbutton??????????????????? iconcls=icon-remove plain=true删除/a??? /div 添加弹出框： 在添加弹出框内容中，有一个class=”easy-dialog”, 这个对话框（dialog）是