标签：
1：html代码：
<!--搜索框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代码：
<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>
标签：
原文地址：http://my.oschina.net/u/2405705/blog/530805
