<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- easyui的樣式 -->
<link rel="stylesheet" type="text/css" href="../jslib/jquery-easyui-1.3.1/themes/default/easyui.css">
<!-- 小圖標的樣式 -->
<link rel="stylesheet" type="text/css" href="../jslib/jquery-easyui-1.3.1/themes/icon.css">
<script type="text/javascript" src="../jslib/jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../jslib/jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../jslib/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="../jslib/syUtil.js"></script>
<script type="text/javascript">
var datagrid;
var editRow = undefined;
$(function(){
datagrid = $("#datagrid").datagrid({
url : sy.bp()+'/userController/datagrid.action',
iconCls : "icon-save",
pagination : true,
pageSize : 10,
pageList : [10,20,30],
//fit屬性讓這個表格填充到父級容器中
fit : true,
//fitColumns讓表格自動調整列的寬度，而不出現橫向的滾動條
fitColumns : false,
//如果一個列的值太長，需要折行顯示，就需要設置nowrap : false
nowrap : false,
border : false,
idField : "id",
//行的樣式
rowStyler : function(rowIndex,rowData){
if(rowData.name=='guest'){
return "background:red";
}
},
sortName : "name",
sortOrder : "desc",
//要使用frozenColumns那麼fitColumns必須爲false
//frozenColumns就是在出現列滾動條時，下面這幾列不動
frozenColumns : [[
{
title:"編號",
//field:"id",
width:100,
checkbox:true
},
{
title:"姓名",
field:"name",
width:100,
sortable:true,
align : 'center',
styler : function(value,rowData,rowIndex){
if(value=='guest'){
return "background:green";
}
}
}
]],
columns : [[
{
title:"密碼",
field:"pwd",
width:400,
//一定要返回一個字符串
formatter:function(value,rowData,rowIndex){
return "<span title='"+value+"'>"+value+"</span>";
}
},
{title:"創建時間", field:"createdatetime", width:600},
{title:"最後修改時間", field:"modifydatetime", width:600},
{
title:"控制",
//借用一個字段，不然就顯示不出來，上面那個field:"id",就註釋掉
field:"id",
width:400,
//一定要返回一個字符串
formatter:function(value,rowData,rowIndex){
return "<button>刪除</button><button onclick='edit("+rowIndex+");'>編輯</button>";
}
}
]],
toolbar : [
{text:"新增",iconCls:"icon-add",handler:function(){
if(editRow != undefined){
datagrid.datagrid('endEdit',editRow);
}else{
datagrid.datagrid('insertRow',{
index : 0,
row : {
}
});
changEditorAdd();
datagrid.datagrid('beginEdit',0);
editRow = 0;
}
}},
"-",
{text:"刪除",iconCls:"icon-remove",handler:function(){
var rows = datagrid.datagrid('getSelections');
if(rows.length>0){
$.messager.confirm("請確認","你確定要刪除所選擇的的記錄嗎？",function(r){
if(r){
var ids = [];
for(var i=0;i<rows.length;i++){
ids.push(rows[i].id);
}
$.ajax({
url : sy.bp()+'/userController/remove.action',
data : {
ids : ids.join(',')
},
dataType : 'json',
success : function(r){
datagrid.datagrid('load');
datagrid.datagrid('unselectAll');
$.messager.show({title:"提示",msg:"刪除成功"});
}
});
}
});
}else{
$.messager.alert("提示","請選擇要刪除的記錄","warning");
}
}},
"-",
{text:"修改",iconCls:"icon-edit",handler:function(){
var rows = datagrid.datagrid('getSelections');
if(rows.length==1){
if(editRow != undefined){
datagrid.datagrid('endEdit',editRow);
}else{
changEditorEdit();
editRow = datagrid.datagrid('getRowIndex',rows[0]);
datagrid.datagrid('beginEdit',editRow);
}
}
}},
"-",
{text:"保存",iconCls:"icon-save",handler:function(){
datagrid.datagrid('endEdit',editRow);
}},
"-",
{text:"取消編輯",iconCls:"icon-redo",handler:function(){
editRow = undefined
datagrid.datagrid('rejectChanges');
datagrid.datagrid('unselectAll');
}},
],
onAfterEdit : function(rowIndex, rowData, changes){
var inserted = datagrid.datagrid('getChanges','inserted');
var updated = datagrid.datagrid('getChanges','updated');
if(inserted.length<1&&updated.length<1){
editRow = undefined;
datagrid.datagrid('unselectAll');
return;
}
var url = "";
if(inserted.length>0){
url = "/userController/add.action";
}
if(updated.length>0){
url = "/userController/edit.action";
}
$.ajax({
url : sy.bp()+url,
data : rowData,
dataType : 'json',
success : function(r){
if(r&&r.success){
datagrid.datagrid('acceptChanges');
$.messager.show({
title:'提示',
msg:"操作成功！"
});
}else{
datagrid.datagrid('rejectChanges');
$.messager.alert("錯誤",r.msg,"error");
}
editRow = undefined;
}
});
},
onDblClickRow: function(rowIndex, rowData){
if(editRow != undefined){
datagrid.datagrid('endEdit',editRow);
}else{
changEditorEdit();
datagrid.datagrid('beginEdit',rowIndex);
editRow = rowIndex;
}
},
//右鍵顯示菜單
onRowContextMenu: function(e, rowIndex, rowData){
e.preventDefault();
$(this).datagrid('unselectAll');
$(this).datagrid('selectRow',rowIndex);
$('#menu').menu('show', {
left: e.pageX,
top: e.pageY
});
}
});
//改變表頭文字對齊方式
$(".datagrid-header div").css("textAlign","left");
});
var search2 = function() {
//load會回到第一頁，reload會停留在當前頁，所以一般用load
datagrid.datagrid('load', getFormInput($('#searchForm')));
};
var clear2 = function(){
datagrid.datagrid('load', {});
$('#searchForm input').val('');
}
var getFormInput = function(form){
var o = {};
$.each(form.serializeArray(), function(index) {
if (o[this['name']]) {
o[this['name']] = o[this['name']] + "," + this['value'];
} else {
o[this['name']] = this['value'];
}
});
return o;
}
//擴展一個editor
$.extend($.fn.datagrid.defaults.editors, {
datetimebox: {
init: function(container, options){
var editor = $('<input/>').appendTo(container);
options.editable = false;
//變成datetimebox
editor.datetimebox(options);
return editor;
},
getValue: function(target){
return $(target).datetimebox('getValue');
},
setValue: function(target, value){
$(target).datetimebox('setValue',value);
},
resize: function(target, width){
$(target).datetimebox('resize',width);
},
destroy: function(target){
$(target).datetimebox('destroy');
}
}
});
//爲datagrid添加方法
$.extend($.fn.datagrid.methods, {
addEditor : function(jq, param) {
if (param instanceof Array) {
$.each(param, function(index, item) {
var e = $(jq).datagrid('getColumnOption', item.field);
e.editor = item.editor;
});
} else {
var e = $(jq).datagrid('getColumnOption', param.field);
e.editor = param.editor;
}
},
removeEditor : function(jq, param) {
if (param instanceof Array) {
$.each(param, function(index, item) {
var e = $(jq).datagrid('getColumnOption', item);
e.editor = {};
});
} else {
var e = $(jq).datagrid('getColumnOption', param);
e.editor = {};
}
}
});
function changEditorAdd(){
datagrid.datagrid('addEditor',[
{
field: 'pwd',
editor: {
type:'validatebox',
options:{required:true}
}
},
{
field: 'name',
editor: {
type:'validatebox',
options:{required:true}
}
}
]);
datagrid.datagrid('removeEditor',['createdatetime','modifydatetime']);
}
function changEditorEdit(){
datagrid.datagrid('removeEditor',['pwd']);
datagrid.datagrid('addEditor',[
{
field: 'name',
editor: {
type:'validatebox',
options:{required:true}
}
},
{
field: 'createdatetime',
editor: {
type:'datetimebox',
options:{required:true}
}
},
{
field: 'modifydatetime',
editor: {
type:'datetimebox',
options:{required:true}
}
}
]);
}
function edit(rowIndex){
var row = datagrid.datagrid('getRows')[rowIndex];
alert(row.name);
}
</script>
</head>
<body>
<div class="easyui-layout" fit="true" border="false">
<div title="查詢" region="north" style="height:110px;overflow:hidden">
<form id="searchForm">
<table id="queryTab" style="width:100%;height:100%;">
<tr>
<th align="right">用戶名</th>
<td><input name="name"/></td>
</tr>
<tr>
<th align="right">創建日期</th>
<td>
<input name="createdatetimeStart" class="easyui-datetimebox" editable="fasle" style="width:155px"/>
至
<input name="createdatetimeEnd" class="easyui-datetimebox" editable="fasle" style="width:155px"/>
<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="search2();">查詢</a>
<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="clear2();">清空</a>
</td>
</tr>
</table>
</form>
</div>
<div title="用戶管理" region="center" border="false">
<table id="datagrid"></table>
</div>
<div id="menu" class="easyui-menu" style="width:120px;display:none;">
<div onclick="" iconCls="icon-add">增加</div>
<div onclick="" iconCls="icon-remove">刪除</div>
<div onclick="" iconCls="icon-edit">修改</div>
</div>
</div>
</body>
</html>