最近公司要用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" onclick="newUser()">New User</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="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" onclick="saveUser()">Save</a> <a href="javascript:void(0)" class="easyui-linkbutton" icon-Cls="icon-cancel" onclick="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不能識別輸出的結果，造成截止，不能顯示正確的結果。