easyui dialog插件

1:html代碼:html

   

<div id="manufactureTableToolBar">
		<a href="#" onclick="showManufactureDialog()" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">新增</a>
	</div>
	
<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>

 2:js代碼:ide

    

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");
 }
相關文章
相關標籤/搜索