Jquery易用户界面的添加,修改,删除,查询等基本操作介绍

初识Jquery易用户界面看了一些博主用其开发出来的项目，页面很炫，感觉功能挺强大，效果也挺不错，最近一直想系统学习一套前台控件，于是在网上找了一些参考示例。写了一些基本的增删改查功能，算是对该控件的基本入门。后续有时间继续深入学习。在学习jquery easyui前应该先到官网下载最新版本http://www.jeasyui.com/download/index.php先看一下运行后的页面1、列表展示

2、新增页面

3、修改页面

把jquery easyui下载好之后，一般引用下页几个文件复制代码代码如下：链接cn博客。com/Resources/easy ui/CSS/默认。CSS ' rel='样式表type=' text/CSS '/link href=' http://www .cn博客。com/Resources/easy ui/js/themes/default/easy ui。CSS ' rel='样式表type='text/css' //页面图标样式链接。cn博客。com/参考资料/轻松ui/js/主题/图标。CSS ' rel='样式表type=' text/CSS '/script src=' http :3358 www。cn博客。com/Resources/easy ui/js/jquery-1。7 .2 .量滴js ' type=' text/JavaScript '/script//jquery easy ui主要的射流研究…脚本src=' http :http://www。cn博客。com/Resources/easy ui/js/jquery。简单的用户界面。量滴js ' type=' text/JavaScript '/script首先是列表展示数据复制代码代码如下：表格id=' DG ' title=' My Users ' class=' measuri-datagrid ' style=' width : 700 px；身高： 250 px ' URL=' http://www。cn博客。com/GetJson/createjson。aspx ' toolbar=' # toolbar '分页=' true '行号=' true ' fitcolumns=' true '单选=' true '且tr th字段='帐户代码'宽度=' 50 '编号/th字段='AccountName '宽度='50 '卡名/th字段='AccountPwd '宽度='50 '密码第/个字段='CreateTime '宽度='50 '创建时间第/个字段='CreateName '宽度='50 '创建人/th /tr /thead /tablejquery easyui是用数据网格对数据进行展示的，所以班级要选择简单的用户界面数据网格；全球资源定位器(统一资源定位符)是本列表的一个json格式的数据来源toobar后面跟着的#toobar '是列表的一个工具栏，本示例在列表上显示的是添加，修改，删除功能按钮对数据进行操作分页。是否显示分页，行号显示行数，分页时向后台传去两个参数，一个就是当前页数另一个就是每页显示行数；fitcolumns:自适应列宽；singleselected:单选。工具条代码复制代码代码如下： div id=' toolbar ' a href=' JavaScript : void(0)' class=' easui-link button ' icon cls=' icon-add ' onclick=' new user()' plain=' true '添加/a a href=' JavaScript : void(0)' class=' measuri-link button ' icon cls=' icon-edit ' onclick=' edit user()' plain=' true '修改/a a href=' JavaScript : void(0)' class=' measuri-link button ' icon cls=' icon-remove '普通='true '删除/a /div数据源格式

数据源添加弹出框复制代码代码如下： div id=' DLG ' class=' easy ui-dialog ' style=' width : 400 px；高度： 280像素；padd : 10px 20px ' closed=' true ' button=' # DLG-巴顿斯' div class=' ftitle '信息编辑/div表单id='fm '方法='post' div class='fitem '标签编号/标签输入名称='帐户代码' class=' easui-validate box '必需=' true '/div class=' fitem '标签卡号/标签输入名称='帐户名' class='测量-验证框'必需=' true '/div class=' fitem '标签密码/标签输入名称='帐户pwd ' class='测量-验证框'必需=' true '/div class=' fitem '标签创建时间/标签输入名称=' CreateTime ' class=' measure I-datebox '必需=' true '/div类=' fitem '标签创建人/label input name=' create name ' class=' measuri-vlidatebox '/div input type=' hidden ' name=' action ' ID=' hidtype '/input type=' hidden ' name=' ID ' ID=' Nameid '/form/div？ div id=' DLG-buttons ' a href=' JavaScript : void(0)' class=' measuri-link button ' onclick=' save user()' icon cls=' icon-save '保存/a a href=' JAVAScript : void(0)' class=' measuri-link button ' onclick=' JAVAScript : $(' # DLG ').对话框('关闭')'图标cls='图标-取消'取消/a /div注：类为弹出框类型；关闭：当前显示状态为隐藏；按钮：弹出框的功能按钮；对弹出的添加页面添加样式复制代码代码如下：样式类型=' text/CSS ' # FM { margin : 0；padding: 10px 30px }。fti tle { font-size : 14px字体粗细：粗体；padd : 5px 0；边距-底部： 10px边框-底部： 1px实心# ccc}。fitem { margin-bottom : 5px；} .fitem标签{ display : inline-block；宽度： 80px} /style js实现对数据的添加修改删除复制代码代码如下：脚本类型=' text/JavaScript ' var URL；定义变量类型；函数newuser() { $('#dlg ').对话框("打开")。对话框("设置"、"新用户");$('#fm ').形式(“清除”)；URL=' UserManagEment . aspx document。getelementbyid(' hidtype ').value=' submit}函数edituser() { var row=$('#dg ').数据网格(' GetSelected ')；if (row) { $('#dlg ').对话框("打开")。对话框("设置"、"编辑用户");$('#fm ').表单(“加载”，行)；url='UserManage.aspx？id=' row .身份证；} }函数saveuser() { $('#fm ').表单(' submit '，{ url: url，onsubmit : function(){ return $(this)).表单(“验证”)；}，成功：函数（结果){ if(结果=='1') { $.messager.alert('提示信息', '操作成功');$('#dlg ').对话框("关闭");$('#dg ').datagrid(' load ')；} else { $.messager.alert('提示信息', '操作失败');} } });}函数destroyUser() { var row=$('#dg ').数据网格(' GetSelected ')；如果（第行){ $.messager.confirm('Confirm '，'您确定要销毁此用户吗？函数(r) { if (r) { $ .post('destroy_user.php '，{ id: row.id }，function(result){ if(result。成功){ $(' # DG ').datagrid(' reload ')；//重新加载用户数据} else { $.messager.show({ //显示错误消息标题：“错误”，消息：结果。错误消息})；} }，' JSON ')；} });} }/脚本