eayUI中测试《一》获取数据和展示在列表中的数据展示，删除数据，修改数据，增加数据
2017-05-07 17:13
871 查看
<?xml version="1.0" encoding="UTF-8"?>classpath:smtp/*/*.propertiesclasspath:config/*.propertiesKh2011$En51地址请求的时候有项目名但是通过，引用js时候就没有项目名主要原因是：js的引用文件夹的名要和文件夹在一个目录下。
一般情况class是不能修改的，因为我们引用的时是esyUI封装好的数据title是表格的名，例如：使用js的引用collapsible：为true时，是允许有一个收缩栏url：是我们请求的路径，method：get或者post我们请求的方式tr标签是行，th标签是列标签table中的id=datagrid_id是确定一个id，通过这个id可以直接引用封装在js中的数据
datagrid（）这个不能修改这是个固定写fa<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta charset="UTF-8"><title>商品的表格</title><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/3rd/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/3rd/themes/icon.css"><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/3rd/demo.css"><script type="text/javascript" src="${pageContext.request.contextPath}/3rd/jquery.min.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/3rd/jquery.easyui.min.js"></script><!-- 引入一个中文的js --><script type="text/javascript" src="${pageContext.request.contextPath}/3rd/locale/easyui-lang-zh_CN.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/js/index.js"></script></head><body><!-- <table id="datagrid_id" class="easyui-datagrid" style='display: none; float: none;' align="center"></table> --><table id="datagrid_id" class="easyui-datagrid" style='display: none; float: none;' align="center"></table><div id="add" ><div style="padding:10px 60px 20px 60px"><form id="formId" method="post"><table cellpadding="5"><tr><td>商品名:<input id="pidId" type='hidden' name='gid' value=""></td><td><input id="gnameId" type="text" name="gname" data-options="required:true" value=""/></td></tr><tr><td>商品价格:</td><td><input id="gpriceId" class="easyui-textbox" type="text" name="gprice" data-options="required:true" value=""></input></td></tr><tr><td>商品的数量:</td><td><input id="gcountId" class="easyui-textbox" type="text" name="gcount" data-options="required:true" value=""></input></td></tr><tr><td>商品简介：</td><td><input id="gcontentId" class="easyui-textbox" name="gcontent" data-options="multiline:true" style="height:60px" value=""></input></td></tr></table></form><div style="text-align:center;padding:5px"><a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">确定</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">取消</a></div></div></div></body></html>=====================================================================================$(function() {// datagrid()是固定写法===============================获取数据分页展示数据===================================================$("#datagrid_id").datagrid({url:'taotao/goods/datagrid.action',method:'post',columns : [ [ {field : 'gid',title : '商品的Id',width : 100}, {field : 'gname',title : '商品名',width : 100}, {field : 'gprice',title : '价格',width : 100,align : 'center'}, {field : 'gcount',title : '总的数量',width : 100,align : 'center'}, {field : 'gcontent',title : '商品的简介',width : 100,align : 'center'}, {field : 'gdate',title : '时间',width : 100,align : 'center'}, {field : 'gphoto',title : '图片地址',width : 100,align : 'center'} ] ],title : '使用js引用的表',width : '800px',height : '350px',fitColumns : true,collapsible : true,singleSelect : true,//只能选择一个/* style="width: 60%;margin:auto",*/pageNumber:1, //初始化页码pageSize:'5',//初始化页的数据pageList: [5,7,15,20],//每页含有的数据pagination : true,//分页添加的工具栏rownumbers :true, //展示行列号toolbar:[{ //添加工具栏text:'添加按钮',iconCls:'icon-add',handler:function(){$('#formId').form('clear');//先删除弹框里面的按钮$('#add').dialog('open')//点击添加按钮的时候进行添加数据.dialog('close')是关闭按钮}},'-',{text:'删除按钮',//+++++++++++++++++++++++++++++通过下选中的数据的id删除数据++++++++++++++++++++++++++++++++++++++++++++iconCls:'icon-clear',handler:function(){//获取对应的id，$('#id').datagrid('getSelected');//返回一个选中的行，没有选中返回的时null//在通过ajax进行数据的返回的var rowId = $('#datagrid_id').datagrid('getSelected');//console.log(rowId.gid);if(rowId!=null){//不为空选择了数据$.ajax({type:'post',url:'taotao/goods/delete.action',data:{gid:rowId.gid},//选中行的数据dataType:'json',success:function (data){if(data){alert("删除成功");$('#datagrid_id').datagrid('reload');//加载当前页面//$('#datagrid_id').datagrid('load');//重新加载页面}else{alert('删除失败');}}});}else{alert('请选择数据');}}},'-',{text:'编辑按钮',//++++++++++++++++++++++++++++++++++通过选行的id编辑数据+++++++++++++++++++++++++++++iconCls:'icon-edit',handler:function(){var rowId = $('#datagrid_id').datagrid('getSelected');if(rowId!=null){$.ajax({tyep:'post',url:'taotao/goods/selectbyid.action',data:{gid:rowId.gid},dataType:'json',success:function (data){alert(data.gprice);//esyUI有自己封装的数据textboxdocument.getElementById('pidId').value=data.gid; //input标签添加数据$("#gpriceId").textbox('setValue',data.gprice); //设定数据document.getElementById('gnameId').value=data.gname;$('#gcountId').textbox('setValue',data.gcount);$('#gcontentId').textbox('setValue',data.gcontent);/*document.getElementById('gpriceId').value="1234";*/$('#add').dialog({title:'修改商品'});$('#formId').form('load',rowId.pid);$('#add').dialog('open');}});}else{alert("请选择修改的数据");}}}],singleSelect:true //只能选择一个数据});});//添加函数$(function (){$('#add').dialog({title: '添加按钮',width: 400,height: 300,closed: true, //只有电点击的时候才会打开cache: false,/* href: , */modal: false});});//添加或者修改按钮==========================================弹出框中的确定按钮========================确定function submitForm(){var datas = $('#formId').serialize();var gname = $('#gnameId').prop('value');var gpirce = $('#gpriceId').prop('value');var gcount = $('#gcountId').prop('value');var id=$("#pidId").val();if(gname==''||gpirce==''||gcount==''){alert("input数据中不能为空");$('#add').dialog('close');}else if(id !=''){//修改数据+++++++++++++++++++++++++++++++++++++++++修改数据的跳转路径++++++++++++++++++++++++++++++++$.ajax({type:'post',url:'taotao/goods/udpatebyid.action',data:$("#formId").serialize(),dataType:'json',success:function (data){if(data){//修改成功alert("修改成功");$('#add').dialog('close');$('#datagrid_id').datagrid('reload');}else{//修改失败alert("修改失败");$('#add').dialog('close');}}});}else{//添加数据++++++++++++++++++++++++++++++++++++添加数据跳转的路径++++++++++++++++++++++++++++++++++++==$.ajax({type:'post',url:'taotao/goods/insert.action',data:$("#formId").serialize(),//form框中的所有的数据dataType:"json",success: function (data){if(data){console.log("成功");$('#add').dialog('close'); //关闭弹框$('#datagrid_id').datagrid("reload");}else{console.log("失败");$('#add').dialog('close'); //关闭弹框}}});}};//添加按钮==========================================================================================取消function clearForm(){$('#add').dialog('close'); //关闭弹框}
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta charset="UTF-8"><title>商品的表格</title><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/3rd/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/3rd/themes/icon.css"><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/3rd/demo.css"><script type="text/javascript" src="${pageContext.request.contextPath}/3rd/jquery.min.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/3rd/jquery.easyui.min.js"></script><!-- 引入一个中文的js --><script type="text/javascript" src="${pageContext.request.contextPath}/3rd/locale/easyui-lang-zh_CN.js"></script></script></head><body><!-- 定义样式使用的：style --><div style="margin:20px 0;"></div><div class="easyui-layout" style="width:100%;height:100%;"><div data-options="region:'north'" style="height:100px"><h1 style="color:red;float:left;font-size:45px;magin:0 100px 0 100px;">项目开始操作</h1><span style="float:right;font-size: 14px;margin-top:50px;margin-right:20px">当前用户</span></div><div data-options="region:'west',split:true" title="项目管理" style="width:150px;"></div><div data-options="region:'center',title:'首页'"><!-- font-weight:是单纯的加粗，font-family设置字体,text-align:text-align属性控制文本的水平方向的对齐方式：左对齐、居中对齐、右对齐,color控制颜色 --><h1 style="text-align:center;margin-top:200px;font-family:'宋体';font-weight:bold;">hello world ！</h1><h1 style="text-align: center; margin-top: 200px; font-family: '楷体'; font-weight: bold; font-size: 60px; color: red;">欢迎使用</h1></div></div></body></html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 项目经验之:利用Jquery+HTML静态模版实现数据的展示及无刷新增加,修改,删除,分页操作!!!
- 利用Jquery+HTML静态模版实现数据的展示及无刷新增加,修改,删除,分页操作!
- 获取assets目录文件解析数据存储数据库 Listview展示 Dialog删除修改从数据库获取数据
- JPA学习笔记---JPA数据的操作:增加,删除,修改,获取,使用JPQL进行查询
- JPA数据的操作:增加,删除,修改,获取,使用JPOL进行查询
- javascript学习碎片---js对表格数据修改、增加、删除，获取行列数据，打包为json数据包
- 获取、增加、修改、删除sqlserver字段描述
- Table动态增加,删除,修改行,保存数据
- ASP.Net增加修改删除数据
- DataSet增加修改删除一个数据
- html对select标签实现数据动态增加，删除，修改功能。
- Sql Server 获取、增加、修改、删除 字段描述
- 获取、增加、修改、删除sqlserver字段描述
- Sql Server 获取、增加、修改、删除 字段描述
- 修改表空间（改变大小，增加数据文件，修改自动扩展性，移动数据文件，重命名，删除）
- 跟我一起学extjs5(39--单个模块的设计[7数据的增加修改删除])
- 获取、增加、修改、删除sqlserver字段描述
- GirdView,包含DropDownList,DatePicker的数据增加删除,修改
- 增加、编辑、删除和密码修改测试用例
- GridView 增加、删除、修改 数据(绝对好用)