easyui 增啥改查的demo
1：html代碼：
javascript
<!--搜索框start-->
<div class="row">
<form id="manufactureFormSearch">
<table class="formtable">
<tr>
<td><label for="manufactureName">製造商名稱:</label></td>
<td><input type="text" name="manufactureName" class="easyui-textbox" placeholder="製造商名稱"></td>
<td><label for="manufactureNameEn">製造商英文名稱:</label></td>
<td><input type="text" name="manufactureNameEn" class="easyui-textbox" placeholder="製造商英文名稱"></td>
</tr>
<tr>
<td><label for="createUserid">建立人帳號:</label></td>
<td><input type="text" name="createUserid" class="easyui-textbox" placeholder="建立人帳號"></td>
<td><label for="createTime">建立起止時間:</label></td>
<td>
<input type="text" name="createTimeFrom" class="easyui-datetimebox" placeholder="建立開始時間">~
<input type="text" name="createTimeTo" class="easyui-datetimebox" placeholder="建立結束時間">
</td>
</tr>
<tr>
<td><label for="updateUserid">最後一次更新人帳號:</label></td>
<td><input type="text" name="updateUserid" class="easyui-textbox" placeholder="最後一次更新人帳號"></td>
<td><label for="updateTime">最後一次更新起止時間:</label></td>
<td>
<input type="text" name="updateTimeFrom" class="easyui-datetimebox" placeholder="最後一次更新開始時間">~
<input type="text" name="updateTimeTo" class="easyui-datetimebox" placeholder="最後一次更新結束時間">
</td>
</tr>
<tr>
<td><label for="status">狀態：</label></td>
<td>
<select id="statusOption" class="easyui-combobox" name="status" style="width:100px;">
<option value="-1">----請選擇----</option>
<option value="0">未激活</option>
<option value="1">已激活</option>
</select>
</td>
</tr>
</table>
<div>
<a href="#" onclick="searchManufacture()" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
</div>
</form>
</div>
<!--搜索框end-->
<!--table start-->
<div class="row">
<div id="manufactureTableToolBar">
<a href="#" onclick="showManufactureDialog()" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">新增</a>
</div>
<table id="manufactureTable">
<thead>
<tr>
<th data-options="field:'id'">製造商編號</th>
<th data-options="field:'manufactureName'">製造商名稱</th>
<th data-options="field:'manufactureNameEn'">製造商英文名稱</th>
<th data-options="field:'manufactureWebsite'">製造商網站</th>
<th data-options="field:'manufactureImage',formatter:manufactureImageFormatter">製造商圖片</th>
<th data-options="field:'createUserid'">建立人帳號</th>
<th data-options="field:'createTime',formatter:dateFormatter">建立時間</th>
<th data-options="field:'updateUserid'">最後一次更新人帳號</th>
<th data-options="field:'updateTime',formatter:dateFormatter">最後一次更新時間</th>
<th data-options="field:'status',formatter:manufactureStatusFormatter">狀態</th>
<th data-options="field:'action',formatter:manufactureActionFormatter,width:100">操做</th>
</tr>
</thead>
</table>
</div>
<!--table end-->
<!--模態框 start-->
<div id="manufactureModal" class="easyui-dialog" title="My Dialog" style="width:600px; height:700px;"
data-options="modal:true,buttons:'#manufactureDialogButtons',closed:true,">
<div class="dialog-body">
<form id="manufactureForm" method="post" style="padding-left:20px">
<input type="hidden" name="id" id="idHidden">
<input type="hidden" name="manufactureImage" id="manufactureImageHidden">
<table class="formtable">
<tr style="height:50px;">
<td><label for="manufactureName">製造商名稱:</label></td>
<td><input type="text" name="manufactureName" class="easyui-textbox" data-options="width:250,required:true,validType:['length[0,200]']" /></td>
</tr>
<tr style="height:50px;">
<td><label for="manufactureNameEn">製造商英文名稱:</label></td>
<td><input type="text" name="manufactureNameEn" class="easyui-textbox" data-options="width:250,validType:['length[0,200]']" /></td>
</tr>
<tr style="height:50px;">
<td><label for="manufactureWebsite">製造商網站:</label></td>
<td><input type="text" name="manufactureWebsite" class="easyui-textbox" data-options="width:250,validType:['length[0,500]']" /></td>
</tr>
<tr style="height:100px;">
<td><label for="manufactureImage">製造商圖片:</label></td>
<td>
<input id="manufactureImageFileInput" type="file"/>
<img src="" style="display:none;width:100px;height:100px;" id="manufactureImageShow" class="tip"/>
</td>
</tr>
<tr style="height:50px;">
<td><label for="status">狀態：</label></td>
<td>
<select id="statusOptionForSaveOrUpdate" class="easyui-combobox" name="status" data-options="width:250,required:true">
<option value="-1">----請選擇----</option>
<option value="0">未激活</option>
<option value="1">已激活</option>
</select>
</td>
</tr>
<tr style="height:50px;">
<td><label for="manufactureWebsite">商品分類:</label></td>
<td><ul id="categoryListTree" class="easyui-tree" data-options="url:'${rc.contextPath}/category/getCategoryList.html?parentId=0',checkbox:true"></ul></td>
</tr>
</table>
<div id="manufactureDialogButtons">
<a href="#" id="btnSaveManufacture" data-options="iconCls:'icon-save'" onclick="submitManufactureForm()" class="easyui-linkbutton">確認</a> <a
href="#" id="backbtn" onclick="closeManufactureDialog()" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'"
>取消</a>
</div>
</form>
</div>
</div>
<!--模態框 end-->
2:js代碼：html
<script>
var MANUFACTURE_API_BASE_URL = "${rc.contextPath}/manufacture/";
$(function() {
$('#manufactureTable').datagrid({
toolbar:'#manufactureTableToolBar',
pagination : true,//顯示分頁
pageSize : 20,//分頁大小
pageList : [ 20, 50, 100 ],
loader : manufactureTableLoader,
onDblClickRow : showManufactureDialog
});
$('#manufactureImageFileInput').uploadify(
{
'debug' : true,
'auto' : true, //是否自動上傳,
'buttonClass' : 'preimg_btn', //按鈕輔助class
'buttonText' : '上傳圖片', //按鈕文字
'height' : 50, //按鈕高度
'width' : 50, //按鈕寬度
'multi': false,
'fileSizeLimit' : '1024KB', //文件大小限制 0爲無限制 默認KB
'fileTypeDesc' : 'All Files', //圖片選擇描述
'fileTypeExts' : '*.gif; *.jpg; *.png',//文件後綴限制 默認：'*.*'
'queueID' : 'queue', //默認隊列ID
'queueSizeLimit' : 20, //一個隊列上傳文件數限制
'removeCompleted' : true, //完成時是否清除隊列 默認true
'removeTimeout' : 3, //完成時清除隊列顯示秒數,默認3秒
'requeueErrors' : false, //隊列上傳出錯，是否繼續回滾隊列
'successTimeout' : 5, //上傳超時
'uploadLimit' : 99, //容許上傳的最多張數
'swf' : '${rc.contextPath}/static/upload/uploadify.swf', //swfUpload
'uploader' : '${rc.contextPath}/file/uploadFile.html', //服務器端腳本
'formData' : {'subDirectory':"manufacture"},
//修改formData數據
'onUploadStart' : function(file) {
},
//刪除時觸發
'onCancel' : function(file) {
},
//清除隊列
'onClearQueue' : function(queueItemCount) {
},
//調用destroy是觸發
'onDestroy' : function() {
},
//每次初始化一個隊列是觸發
'onInit' : function(instance) {
},
//上傳成功
'onUploadSuccess' : function(file, data,
response) {
debugger;
var manufactureImageHidden=$("#manufactureImageHidden");
var manufactureImageShow=$("#manufactureImageShow");
manufactureImageShow.attr("src",data);
manufactureImageShow.show();
manufactureImageHidden.val(data);
},
//上傳錯誤
'onUploadError' : function(file, errorCode,
errorMsg, errorString) {
},
//上傳彙總
'onUploadProgress' : function(file,
bytesUploaded, bytesTotal,
totalBytesUploaded, totalBytesTotal) {
},
//上傳完成
'onUploadComplete' : function(file) {
},
});
});
function manufactureTableLoader(param, success, error) {
var queryParams = $('#manufactureFormSearch').serializeJson();
queryParams.pageIndex = param.page;
queryParams.pageSize = param.rows;
if(queryParams.status=="-1"){
queryParams.status="";
}
queryParams.createTimeFrom= date2Long(queryParams.createTimeFrom);
queryParams.createTimeTo=date2Long(queryParams.createTimeTo);
queryParams.updateTimeFrom=date2Long(queryParams.updateTimeFrom);
queryParams.updateTimeTo=date2Long(queryParams.updateTimeTo);
$.ajax({
type : "post",
url : MANUFACTURE_API_BASE_URL + "query.html",
data : queryParams,
dataType : "json",
success : function(res) {
var result = {};
result.total = res.total;
result.rows = res.records;
success(result);
},
error : function() {
error.apply(this, arguments);
}
});
}
function manufactureActionFormatter(value,row,index){
var optHtml="<a href='javascript:' onclick='deleteManufacture("+index+")' class=''>刪除</a>";
if(row.status==0){
optHtml+="<a href='javascript:' onclick='changeStatus("+index+")' style='padding-left:10px;'>激活</a>"
}
return optHtml;
}
function manufactureStatusFormatter(value,row,index){
var statusStr="";
if(value==0){
statusStr="未激活";
}else{
statusStr="已激活";
}
return statusStr;
}
function manufactureImageFormatter(value,row,index){
var html="";
html+="<img src='"+value+"'"+"style='width:50px;height:50px'/>";
return html;
}
function deleteManufacture(index) {
$.messager.confirm('確認', '你確認刪除？', function(r) {
if (r) {
var manufactureTable = $("#manufactureTable");
var rows = manufactureTable.datagrid("getRows");
var row = rows[index];
$.post(MANUFACTURE_API_BASE_URL + "delete.html", {
id : row.id
}, function(res) {
if(res.status==10000){
$.messager.alert("成功","刪除成功","info");
manufactureTable.datagrid("reload");
}
else{
$.messager.alert("失敗",res.message,"error");
}
});
}
});
}
function changeStatus(index){
$.messager.confirm('確認', '你確認激活嗎？', function(r) {
if (r) {
var manufactureTable = $("#manufactureTable");
var rows = manufactureTable.datagrid("getRows");
var row = rows[index];
$.post(MANUFACTURE_API_BASE_URL + "changeStatus.html", {
manufactureId : row.id,
status:1
}, function(res) {
if(res.status==10000){
$.messager.alert("成功","激活成功","info");
manufactureTable.datagrid("reload");
}
else{
$.messager.alert("失敗",res.message,"error");
}
});
}
});
}
function searchManufacture() {
$('#manufactureTable').datagrid("getPager").pagination("select",1);
}
function showManufactureDialog(rowIndex, rowData) {
var manufactureModal = $('#manufactureModal');
var manufactureForm = $('#manufactureForm');
var manufactureImageShow=$("#manufactureImageShow");
if (rowData) {
manufactureModal.dialog({
title : "編輯製造商"
});
manufactureForm.form('load', rowData);
manufactureImageShow.attr("src",rowData.manufactureImage);
manufactureImageShow.show();
} else {
manufactureModal.dialog({
title : "新增製造商"
});
manufactureForm.form('clear');
manufactureImageShow.attr("src","");
manufactureImageShow.hide();
}
//獲取分類選項並選中它
selectedCategory(rowData);
manufactureModal.dialog("open");
}
function selectedCategory(rowData){
var categoryListTree=$('#categoryListTree');
//將已選擇的分類勾選去掉
var selectNodes=categoryListTree.tree("getChecked");
if(!isArrayEmpty(selectNodes)){
$.each(selectNodes,function(){
categoryListTree.tree("uncheck",this.target);
});
}
if(isArrayEmpty(rowData)){
return;
}
$.ajax({
type : "post",
url : MANUFACTURE_API_BASE_URL + "getCategoryByManufactureId.html",
data : {"manufactureId":rowData.id},
dataType : "json",
success : function(res) {
for(var i in res){
var node = categoryListTree.tree('find', res[i]);
categoryListTree.tree('check', node.target);
}
}
});
}
function closeManufactureDialog() {
$('#manufactureModal').dialog("close");
}
function submitManufactureForm() {
var manufactureModal = $('#manufactureModal');
var manufactureTable = $("#manufactureTable");
var manufactureForm = $('#manufactureForm');
var isValid = manufactureForm.form('validate');
if (!isValid) {
$.messager.alert("驗證失敗", "請修正輸入項再試", "warning");
return;
}
var jsonData = manufactureForm.serializeJson();
//數據處理和其餘判斷
if(jsonData.status==-1){
$.messager.alert("驗證失敗", "請選擇激活狀態", "warning");
return;
}
var selectNodes=$("#categoryListTree").tree("getChecked");
if(isArrayEmpty(selectNodes)){
$.messager.alert("驗證失敗", "請選擇商品分類", "warning");
return ;
}
var categoryStr="";
$.each(selectNodes,function(){
categoryStr+=this.id+",";
});
categoryStr=categoryStr.substring(0,categoryStr.length-1);
jsonData["categoryStr"]=categoryStr;
$.post(MANUFACTURE_API_BASE_URL + "save.html", jsonData,
function(res) {
if (res.status == 10000) {
var title = manufactureModal.dialog("options").title;
manufactureTable.datagrid("reload");
$.messager.alert("成功", title + "成功", "info");
closeManufactureDialog();
} else {
$.messager.alert(title+"失敗", res.message, "error");
}
});
}
</script>
相關文章
- 1. SSM+Mysql+EasyUI增刪改查demo
- 2. easyui增刪改查
- 3. EasyUi 增刪改查
- 4. ssm+EasyUI的增刪改查
- 5. EASYUI的增刪改查
- 6. EasyUi+mvc增刪改查
- 7. WebApi增刪改查Demo
- 8. （五）Mybatis增刪改查demo
- 9. MVC Demo 增刪查改
- 10. DevExpress_增刪改查小Demo
- 更多相關文章...
- • Hibernate實現增刪改查 - Hibernate教程
- • SQLite Autoincrement（自動遞增） - SQLite教程
- • 算法總結-二分查找法
- • 漫談MySQL的鎖機制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. SSM+Mysql+EasyUI增刪改查demo
- 2. easyui增刪改查
- 3. EasyUi 增刪改查
- 4. ssm+EasyUI的增刪改查
- 5. EASYUI的增刪改查
- 6. EasyUi+mvc增刪改查
- 7. WebApi增刪改查Demo
- 8. （五）Mybatis增刪改查demo
- 9. MVC Demo 增刪查改
- 10. DevExpress_增刪改查小Demo