主要原因是：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" οnclick="submitForm()">确定</a> <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="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有自己封装的数据textbox document.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>
