easyui增删改加入自己的理解

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<jsp:include page="common.jsp"></jsp:include>
<script type="text/javascript">
$(function(){
obj={
search:function(){
//这里加载数据到后台,查询时候用这个
$("#tb").datagrid('load',{
use:$.trim($("input[name='use']").val()),
});
},
save:function(){
$("#fm").form("submit",{
            url:urls,                     //使用参数
            onSubmit:function(){
                return $(this).form("validate"); //提交前验证
            },
            success:function(result){
                var result = eval('('+result+')');
                if(result.errorMsg){
                    $.messager.show(
                    {
                        title:"Error",
                        msg:result.errorMsg
                    });
                }
                else{
                    $("#dlg").dialog("close");
                    $("#dg").datagrid("reload")
                }
            }
        });
},
add:function(){
$("#tb").datagrid('appendRow',{
code:'23',
name:'huweznhi',
price:'09',

});
}
};
$("#tb").datagrid({
title:'我的面板',
iconCls:'icon-',
width:800,
height:400,
autoRowHeight: false,
striped: true,//有条纹的
url:'getGson_getGson',
sortOrder: 'desc',
columns:[[
        {field:'code',title:'Code',width:200},
        {field:'name',title:'Name',width:200},
        {field:'price',title:'Price',width:200,align:'center'}
    ]],
    pagination:true,
    rownumbers:true,
    pageSize:10,
    pageList:[10],
    frozenColumns:[[
               {field:'ck',checkbox:true},
<%--                {title:'Code',field:'code',width:80,sortable:true}--%>
]],
toolbar:'#div',
onDblClickRow:function(rowIndex,rowData,changes){
console.log(rowIndex+"--"+rowData.code+"--"+changes);
},
});
//添加了中文的js之后下面的就不需要了
$('#tb').datagrid('getPager').pagination({
   displayMsg:'当前显示从{from}到{to}共{total}记录',
   onBeforeRefresh:function(pageNumber, pageSize){
    $(this).pagination('loading');
    alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
    $(this).pagination('loaded');
   },
  });
});
</script>
<style type="text/css">
.textbox{
height:20px;
margin:0;
padding:0 2px;
box-sizing:content-box;
}
</style>
  </head>
  
  <body>
  <table id="tb">
  </table>
  <div id="div" style="margin: 2px 2px;">
  <div>
  <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-add" οnclick="obj.add();">增加</a>
  <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-edit">修改</a>
  <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-remove">删除</a>
  </div>
  <div style="padding: 0 0 0 7px;">
  查询账号:<input type="text" name="use"  class="textbox"/>
  创建时间从:<input type="text" name="date-from" class="easyui-datebox" editable="false"/>
  到:<input type="text" name="date-to" class="easyui-datebox"/>
  <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-search" οnclick="obj.search()">查询</a>
  </div>
  </div>
  
  
  <div class="easyui-dialog">
  <table>
    <tr><td>姓名:</td><td><input type="text" /></td></tr>
    <tr><td>年龄:</td><td><input type="text" /></td></tr>
    <tr><td>性别:</td><td>男:<input type="radio" value="男">&nbsp 女:<input type="radio" value="女"></td></tr>
    <tr><td></td><td><input type="submit" value="提交"/></td></tr>
    </table>
  </div>
  
  
    <div id="dialog" style="display: none;">
     <form action="getGson_getGson">
    <table>
    <tr><td>姓名:</td><td><input type="text" /></td></tr>
    <tr><td>年龄:</td><td><input type="text" /></td></tr>
    <tr><td>性别:</td><td>男:<input type="radio" value="男">&nbsp 女:<input type="radio" value="女"></td></tr>
    <tr><td></td><td><input type="submit" value="提交"/></td></tr>
    </table>
    </div>
  
  </body>
</html>
---------
package easyui;


import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;


import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;


import org.apache.struts2.interceptor.RequestAware;
import org.apache.struts2.interceptor.ServletRequestAware;
import org.apache.struts2.interceptor.ServletResponseAware;


import com.google.gson.Gson;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;


public class GetGson extends ActionSupport implements ServletRequestAware,ServletResponseAware{
private HttpServletRequest req;
private HttpServletResponse res;
private User user;
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
public void getGson() throws IOException{
Gson son=new Gson();
List<User> list=User.getData();
String page=req.getParameter("page");
String rows=req.getParameter("rows");
String use=req.getParameter("use");
System.out.println("---"+use+"----");
System.out.println(page+"--"+rows);
int row=Integer.parseInt(rows);
List list2=list.subList((Integer.parseInt(page)-1)*row, Integer.parseInt(page)*row<list.size()?Integer.parseInt(page)*row:list.size());
System.out.println(list2.toString());
int total=list.size();
Map<String,Object> map=new HashMap<String, Object>();
map.put("total", total);
map.put("rows", list2);
String s=son.toJson(map);
System.out.println(s);
res.getWriter().write(s);
}
public String add(){
HttpSession session=req.getSession();

return "index";
}
public void setServletRequest(HttpServletRequest arg0) {
req=arg0;
}
public void setServletResponse(HttpServletResponse arg0) {
res=arg0;
}
}


----------------------------------------------------------------------------------------------------------------------------------------------------------------------
最近公司要用easyui,这里自己看了官网几篇文章,遇到些问题,大多数的问题都是敲代码的时候笔误,其他有些地方确实需要注意一下,这里做些笔记。


1.在mysql中建好表之后修改id字段为递增字段,发现这个奇怪的mysql语法,如下


alter table student change id id int auto_increment;


这句是在student表已经建好的情况下来修改字段id为自增列,奇怪的是为嘛change id id,并且后面还要带上id的类型int?


 


2.html5标记


如何申明自己这个html文档是html5标准的呢,<!DOCTYPE html>就这句,根据w3c上的解释,只能是这一句


 


3.定义一个 表格的语法如下


复制代码
    <!--定义一个表格-->
    <table id="dg" title="My User" class="easyui-datagrid" style="width:700px;height:250px" 
    url="get_users.php" toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true" singleSelect="true">
        <thead>
            <tr>
                <th field="firstname" width="50">First Name</th>
                <th field="lastname" width="50">Last Name</th>
                <th field="phone" width="50">Phone</th>
                <th field="email" width="50">Email</th>
            </tr>
        </thead>
    </table>
复制代码
注意这里很多的标签元素是不符合html4的规范的url="get_users.php"这个,在html5里面才有用,在html4里面是不规范的,没有这个元素,toolbar="#toolbar"这个表示表格的工具栏,就是新加,删除,修改的操作。另外easyui自己定义了一套样式class="easyui-datagrid"这一句是easyui里面自定义的样式,在easyui里面还有很多风格的样式。


  定义表格的工具栏如下:


复制代码
    <div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="newUser()">New User</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="editUser()">Edit User</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="destroyUser()">Remove User</a>
    </div>
复制代码
这里面也有自定义标签,例如iconCls="icon-add"这个表示新增按钮。注意这里id="toolbar"这个不是随便定义的,要和上面的toolbar="#toolbar"保持一致。


   点击新增和修改的时候要打开一个对话框,代码如下:


复制代码
    <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px" closed="true" buttons="#dlg-buttons">
        <div class="ftitle">User Information</div>
        <form id="fm" method="post" novalidate>
            <div class="fitem">
                <label>First Name:</label>
                <input name="firstname" class="easyui-validatebox" required="true" />
            </div>
            <div class="fitem">
                <label>Last Name:</label>
                <input name="lastname" class="easyui-validatebox" required="true" />
            </div>        
            <div class="fitem"><label for="">Phone:</label>
                <input name="phone" />
            </div>
            <div class="fitem">
                <label for="">Email:</label><input type="" name="email" class="easyui-validatebox" validType="email" />
            </div>
        </form>
    </div>
复制代码
这里class="easyui-dialog"表示这个是一个对话框来着,buttons="#dlg-buttons"表示这个对话框下面的两个确认,取消按钮,这一这个名字也不是随便定义的。注意<div class="ftitle">User Information</div>这个其实原理很简单,就是定义了一个div,然后给了一个border-bottom: 1px solid #CCCCCC;


因为要和后台交互,在这个对话框里面装了一个form,里面的input元素有些需要进行验证,required="true"表示必须填写元素,validType="email"表示验证类型是emai验证,这里不知道能不能重写这个验证规则,class="easyui-validatebox"定义了验证失败后的提示


  在对话框中的按钮定义在外面,代码如下:


    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" icon-Cls="icon-ok" οnclick="saveUser()">Save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" icon-Cls="icon-cancel" οnclick="javascript:$('#dlg').dialog('close');">Cancel</a>
    </div>
这里id="dlg-buttons"名字要和对话框中的buttons="#dlg-buttons"保持一致的,icon-Cls="icon-ok" ,icon-Cls="icon-cancel"和上面的icon-Cls="icon-add",icon-Cls="icon-edit",icon-Cls="icon-remove"意思类似,都是按钮的样式。


  以上全部都是html的定义。


4.js函数解析


和后台php交互需要使用javascript函数,这里也有很多地方需要注意,代码如下:


复制代码
    <script type="text/javascript">
    var urls;
    function newUser(){
        $('#dlg').dialog('open').dialog('setTitle','New User');
        $('#fm').form('clear');
        urls = 'save_user.php';//为saveUser方法准备访问url,注意是全局变量
    }
    function editUser(){
        var row = $("#dg").datagrid("getSelected");
        if(row){
            $("#dlg").dialog("open").dialog("setTitle","Edit User");
            $("#fm").form("load",row);
            urls = "update_user.php?id="+row.id;//为editUser方法准备访问url,注意是全局变量
        }
    }
    function saveUser(){
        $("#fm").form("submit",{
            url:urls,                     //使用参数
            onSubmit:function(){
                return $(this).form("validate"); //提交前验证
            },
            success:function(result){
                var result = eval('('+result+')');
                if(result.errorMsg){
                    $.messager.show(
                    {
                        title:"Error",
                        msg:result.errorMsg
                    });
                }
                else{
                    $("#dlg").dialog("close");
                    $("#dg").datagrid("reload")
                }
            }
        });
    }
    function destroyUser()
    {
        var row = $("#dg").datagrid("getSelected");
        if(row)
        {
            $.messager.confirm("Confirm","Are you sure you want to destory this.user?",function(r)
            {
                if(r)
                {
                    $.post('destory_user.php',{id:row.id},function(result){
                        if (result && result.success){
                            $('#dg').datagrid('reload');    //重新加载数据
                        } else {
                            $.messager.show({    //显示错误信息
                                title: 'Error',
                                msg: result.msg
                            });
                        }
                    },'json');
                }
            });
        }
    }
    </script>
复制代码
还有后台的php代码这里就不贴出来了,在这里犯了几个错误。


$conn = mysql_connect("localhost","host","Ctrip07185419") or die("can not connect to server");


这句是php中连接服务器的语句,但是报错 Access denied for user 'host'@'localhost' (using password: YES),很明显应该吧"host"换成"root"


$sql = "delete from student where id='$id'";这句是定义sql语句,但是也报错,其实应该这样写:


$sql = "delete from student where id=$id";


还有在执行完删除之后一直没有重新加载数据,怎么看都没有错误,返回值也是对的{"success":true},最后返现在destory_user.php里面有一个echo mysql_error()这句是用来调试的,但是会影响输出结果,后面还要输出执行语句的结果,如果语句中执行两次echo就会造成easyui不能识别输出的结果,造成截止,不能显示正确的结果。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值