iT邦幫忙

0

jqGrid編輯視窗，沒變更任何內容，但按取消時，會再請你確認是否要取消。這個部份不知怎麼設定。--已處理

jqgrid
jbuduoo 2021-08-23 15:35:38 ‧ 1657 瀏覽

  • 分享至 

  • xImage

我的編輯記錄中，沒有變更任何內容，按取消，會顯示「資料已改變，是否儲存。」

經過測試，並不是每一次按都有會這個狀況。
type在HLS值的時後，都可以正常關起來。

  • 這是colModel中type的值
{
label : '<%=type%>',
name : 'type',
edittype: 'custom',
editable : true,
editoptions: {
	custom_value: getTypeValue,
	custom_element: createTypeValue
	}
}
  • 這是type的custom_value及custom_element。
function getTypeValue(elem, oper, value) {
    if (oper == "get") {
    	return $("#type").find(":selected").val();
    }else if(oper == "set") {
    	return $("#type").find(":selected").val();
    }
            
}
		
function createTypeValue(value, editOptions) {
	
var div = '<select class="FormElement ui-widget-content ui-corner-all customelement" id="type" name="type" onchange="gradeChange()">'
        +'<option value="MPEG-DASH">MPEG-DASH</option>'           
       	+'<option value="HLS">HLS</option>'
       	+'</select>'	
return div;
	    }
  • 完整的jsp
<%@page import="b.b.b"%>
<%@page import="system.db.bean.UserBean"%>
<%@page import="system.common.I18N"%>
<%@page import="com.fasterxml.jackson.databind.node.ObjectNode"%>
<%@page import="com.fasterxml.jackson.databind.node.ArrayNode"%>
<%@page import="com.fasterxml.jackson.databind.JsonNode"%>
<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">

<title><%=b.systemName %></title>
<script src="style/jquery/jquery.min.js"></script>

<link href="style/fontawesome-free/css/all.min.css" rel="stylesheet"
	type="text/css">
	
<script src="style/bootstrap/js/bootstrap.bundle.min.js"></script>
<link href="style/bootstrap/css/bootstrap.min.css" rel="stylesheet"	type="text/css">

<link href="style/bootstrap/datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="style/bootstrap/datetimepicker/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>

<link href="style/bootstrap/treeview/bootstrap-treeview.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="style/bootstrap/treeview/bootstrap-treeview.min.js" charset="UTF-8"></script>

<link rel="stylesheet" type="text/css" media="screen"
	href="style/jquery/ui/jquery-ui.css" />
<script src="style/jquery/ui/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" media="screen"
	href="style/jqGrid/css/ui.jqgrid.css" />
<script src="style/jqGrid/js/minified/jquery.jqGrid.min.js"
	type="text/javascript"></script>
	
<script src="style/my.js" type="text/javascript"></script>
<link href="style/my.css" rel="stylesheet">
<%
		UserBean userBean = (UserBean) session.getAttribute("userBean");
		String language = "";	
		String name="";
		String type="";			
		String value1="";
		String value2="";
		String value3="";
		String value4="";
		String value5="";
		String value6="";
		String value7="";
		String value8="";
		String delete = "";

		int value = 0;
		

		if(userBean!=null){
			for(int i=0;i<b.menu.size();i++){
				ObjectNode obj = (ObjectNode)b.menu.get(i);
				if(obj.get("text").asText().equals("menu.System")){
value = userBean.roleInt[i];
				}
			}
			if(value>0){

			name= I18N.getString(userBean.language,"item.name");
			type= I18N.getString(userBean.language,"item.type");			
			value1= I18N.getString(userBean.language,"item.value1");
			value2= I18N.getString(userBean.language,"item.value2");
			value3= I18N.getString(userBean.language,"item.value3");
			value4= I18N.getString(userBean.language,"item.value4");
			value5= I18N.getString(userBean.language,"item.value5");
			value6= I18N.getString(userBean.language,"item.value6");
			value7= I18N.getString(userBean.language,"item.value7");
			value8= I18N.getString(userBean.language,"item.value8");
			delete= I18N.getString(userBean.language,"item.Delete");
			
			
			if(userBean.lang.equals("cht")){
				out.println("<script src=\"style/jqGrid/js/i18n/grid.locale-tw.js\" type=\"text/javascript\"></script>");
				out.println("<script type=\"text/javascript\" src=\"style/bootstrap/datetimepicker/locales/bootstrap-datetimepicker.zh-TW.js\" charset=\"UTF-8\"></script>");
				language = "zh-TW";
			}else if(userBean.lang.equals("chs")){
				out.println("<script src=\"style/jqGrid/js/i18n/grid.locale-cn.js\" type=\"text/javascript\"></script>");
				out.println("<script type=\"text/javascript\" src=\"style/bootstrap/datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js\" charset=\"UTF-8\"></script>");
				language = "zh-CN";
			}else{
				out.println("<script src=\"style/jqGrid/js/i18n/grid.locale-en.js\" type=\"text/javascript\"></script>");
				language = "en";
			}
			}else{
				response.sendRedirect("/login.jsp");
			}
		}else{
			response.sendRedirect("/login.jsp");
		}
	%>
<style type="text/css">
select:focus,
input:focus { 
    outline: none !important;
}
</style>
</head>

<body id="page-top">
	<script>
		$(document).ready(function() {
			init();
			systemGrid('#jqGrid','tableData2.jsp?item=profileRules','');
			$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden","overflow-y" : "hidden" });	
			//取得value3的欄位內容
	    	$.ajax({
	    		type:'post', 
	    		url:'tableData2.jsp?item=getDrmRulesName',
	    		data:{'_search':'search'},
				success :function(data){
				var data2 = JSON.parse(data);
				var data3 ="";
				var rows =data2.rows
				console.log(rows);
				console.log(rows.length);
					if(rows !== null){
						
			            var div = '<select class="FormElement ui-widget-content ui-corner-all customelement" id="perValue3">'
						rows.forEach(e=>{
							console.log(e.name);
							div +='<option value="'+e.name+'">'+e.name+'</option>';
							})
						div += '</select>';
						$("#tempValue3").append(div);
						console.log(data3);
					}
				
				}
	    		});
		});
		var lastSelection;
		var grid;
		var NumOfRow = Math.floor(($(window).height()-220)/24);
		
		var del_options = {
				beforeShowForm : function (formid)
				{
				},
				onclickSubmit: function(params,profileRulesID){
	                return {profileRulesID:profileRulesID};
	            },
	            errorTextFormat : function(data) {
	            	return 'Error: ' + data.responseText
				},
				afterComplete: function (response, postdata, formid) {
					ajaxSuccess(response.responseText);
				}
			};
		
		function deleteRow(cellValue, options, rowObject) {
	    	return "<input style='width:72px;font-size:14px' type='button' value='<%=delete%>' onclick='grid.jqGrid(\"delGridRow\",\""+rowObject.profileRulesID+"\",del_options)' />";	
	    }
		
		var edit_options = {
				recreateForm : true,
				checkOnUpdate : true,
				checkOnSubmit : true,
				closeAfterEdit : true,
				viewPagerButtons : false,
				cellsubmit: 'clientArray',
				beforeEditCell: function (rowid, cellname, v, iRow, iCol) {
				      lastrow = iRow;  //给全局变量赋值
				      lastcell = iCol;
				},
				errorTextFormat : function(data) {
					return 'Error: ' + data.responseText
				},
				beforeShowForm : function (from)
				{	
					//取得這該的內容
					var selrow = grid.jqGrid('getGridParam','selrow');
	                var type = grid.jqGrid('getCell',selrow,'type');
	                var value1 = grid.jqGrid('getCell',selrow,'value1');
	                var value3 = grid.jqGrid('getCell',selrow,'value3');
					//打開編輯後，改變value1~value4的內容。
	                gradeChange(type);
					//打開編輯後, 改變type的內容。
					$("#type").find("option:contains('"+type+"')").attr("selected",true);
					$("#value1").find("option:contains('"+value1+"')").attr("selected",true);					
					$("#value3").find("option:contains('"+value3+"')").attr("selected",true);					
					
					//name不可修改
					$('#name').attr("readonly","readonly");
				}
			};

		
		function systemGrid(jqGridDiv,urlValue,hidecol){
			grid = jQuery(jqGridDiv);
			//alert(1);
			$(jqGridDiv).jqGrid({
				url : urlValue,
				// we set the changes to be made at client side using predefined word clientArray
				editurl : urlValue,
				datatype : "json",
				mtype : 'POST',
				colModel : [		
					{
						label : 'profileRulesID',
						name : 'profileRulesID',
						edittype : 'text',
						editable : true,
						hidden: true,
						editrules : {
							required : false
						}
				},{
					label : '<%=name%>',
					name : 'name',
					edittype : 'text',
					editable : true,
					editrules : {
						required : true
					}
				},{
					label : '<%=type%>',
					name : 'type',
					edittype: 'custom',
					editable : true,
					editoptions: {
						custom_value: getTypeValue,
	                    custom_element: createTypeValue
	                }
				},{
					label : '<%=value1%>',
					name : 'value1',
					edittype : 'select',
					editable : true,
					editrules : {
						required : true
					},
					editoptions: {value:"TS:TS;fMP4:fMP4"}
				},{
					label : '<%=value2%>',
					name : 'value2',
					edittype : 'text',
					editable : true,
					editrules : {
						required : true
					}
				},{
					label : '<%=value3%>',
					name : 'value3',
					edittype : 'custom',
					editable : true,
					editrules : {
						required : true
					},
					editoptions: {
						custom_value: getValue3,
	                    custom_element: createValue3
	                }
				},{
					label : '<%=value4%>',
					name : 'value4',
					edittype : 'text',
					editable : true,
					editrules : {
						required : true
					}
				},{
					label : '<%=value5%>',
					name : 'value5',
					edittype : 'text',
					editable : true,
					editrules : {
						required : true
					}
				},{
					label : '<%=value6%>',
					name : 'value6',
					edittype : 'text',
					editable : true,
					editrules : {
						required : true
					}
				},{
					label : '<%=value7%>',
					name : 'value7',
					edittype : 'text',
					editable : true,
					editrules : {
						required : true
					}
				},{
					label : '<%=value8%>',
					name : 'value8',
					edittype : 'select',
					editable : true,
					editoptions: {value:"Auto:Auto;1:1;2:2;3:3;4:4;5:5;6:6;7:7;8:8"}
					<%
					if((value&4)>0){
				    	out.println("},{label : '"+delete+"',name : 'delete',edittype : 'text',formatter :deleteRow");
					}
					%>
				}],
				viewrecords : true,
				height : '100%',
				width : $("#alarmdiv").width()-20,
				top : 100,
				rowNum : NumOfRow,
				cmTemplate: {sortable:false},
				pager : "#jqGridPager",
				onSelectRow: function(id){
					<%
					if((value&2)>0){
					out.println("grid.editGridRow( id, edit_options );");
					}
					%>
				},
				loadComplete: function(){
				}
			});
			
			$('#jqGrid').navGrid('#jqGridPager',
					// the buttons to appear on the toolbar of the grid
					{
						edit:false,						
						add:true,
						del:false,
						search : false,
						refresh : false,
						view : false,
						position : "left",
						cloneToTop : false
						
					},
					{},
					// options for the Add Dialog
					{
						closeAfterAdd : true,
						recreateForm : true,
						beforeShowForm : function (formid)
						{
							var type="HLS";
							//打開編輯後，改變value1~value4的內容。
			                gradeChange(type);
							//打開編輯後, 改變type的內容。
							$("#type").find("option:contains('"+type+"')").attr("selected",true);

						},
						afterShowForm : function (formid)
						{},
						errorTextFormat : function(data) {
							return 'Error: ' + data.responseText
						},
						afterComplete: function (response, postdata, formid) {
							ajaxSuccess(response.responseText);
						},
						reloadAfterSubmit: true,
						beforeSubmit:function (postdata, formid) {
							return [true,''];
						}
					}
			);
			
			
			var arr = hidecol.split(',');
			for(var i=0;i<arr.length;i++){
				grid.hideCol(arr[i]);	
			}

		}
		
		function ajaxSuccess(response){
			if(response!='Success'){
				alert(response);
				grid.trigger("reloadGrid");
			}
		}
		
	    function getValue3(elem, oper, value) {
	        if (oper == "get") {
	        	return $("#value3").find(":selected").val();
	        }
	    }
		
	    function createValue3(value, editOptions) {
            return $("#tempValue3").html();
	    }
	    
	    function getTypeValue(elem, oper, value) {
	        if (oper == "get") {
	        	return $("#type").find(":selected").val();
	        }else if(oper == "set") {
	        	return $("#type").find(":selected").val();
	        }
            
	    }
		
	    function createTypeValue(value, editOptions) {
	    	
            var div = '<select class="FormElement ui-widget-content ui-corner-all customelement" id="type" name="type" onchange="gradeChange()">'
         +'<option value="MPEG-DASH">MPEG-DASH</option>'           
       		 +'<option value="HLS">HLS</option>'
       		 +'</select>'	    	

            return div;
	    }	    
   
	   function gradeChange(type){
		   
			var value1="";
			var value2="";
			var value3="";
			var value4="";
			var value5="";
			var value6="";
			var value7="";
			var value8="";	
			var value1Str="";
			//var value3Str="";
       		 
       		 
			if(type == null){
				type = $("#type").find(":selected").val();			
			}
			
			if(type == 'HLS'){
				value1="Segment Format";
				value2="Chunk Duratoion";
				value3="Drm";
				value4="Video Max Bitrate";
				value5="Video Min Bitrate";
				value6="Audio Max Bitrate";
				value7="Audio Min Bitrate";
				value8="Version";
				
				value1Str='<td class="DataTD"> <span class="FormElement"><select class="FormElement ui-widget-content ui-corner-all customelement" id="value1" name="value1">'
		       		 +'<option value="TS">TS</option>'
		       		 +'<option value="fMP4">fMP4</option>'
		       		 +'</select></span></td>'
				
			}else if(type =='MPEG-DASH'){
				value1="Template Type";
				value2="Chunk Duratoion";
				value3="Drm";
				value4="Video Max Bitrate";
				value5="Video Min Bitrate";
				value6="Audio Max Bitrate";
				value7="Audio Min Bitrate";
				value8="";
				
				value1Str='<td class="DataTD"> <span class="FormElement"><select class="FormElement ui-widget-content ui-corner-all customelement" id="value1" name="value1">'
		       		 +'<option value="Time">Time</option>'
		       		 +'<option value="Number">Number</option>'
		       		 +'</select></span></td>'
			}

			$('#tr_value1').children('td:eq(0)').html(value1)
			$('#tr_value2').children('td:eq(0)').html(value2)
			$('#tr_value3').children('td:eq(0)').html(value3)
			$('#tr_value4').children('td:eq(0)').html(value4)
			$('#tr_value5').children('td:eq(0)').html(value5)
			$('#tr_value6').children('td:eq(0)').html(value6)
			$('#tr_value7').children('td:eq(0)').html(value7)
			$('#tr_value1').children('td:eq(1)').replaceWith(value1Str)
			//$('#tr_value3').children('td:eq(1)').replaceWith(value3Str)
			
			
			if(value8 === ''){
				$('#tr_value8').hide();
			}else{
				$('#tr_value8').show();
				$('#tr_value8').children('td:eq(0)').html(value8);
			}
			
			
		}
		
	</script>
	<div id="navbardiv"></div>
	<div class="container-fluid" id="mainFrame" style="position: relative;">
		<div class="row" style="height: 90vh">
			<nav class="col-md-2 bg-light">
				<div id="tree" class="bg-light"></div>
			</nav>
			<div class="col-md-10">
			<div id="alarmdiv"></div>
				<div class="container-fluid">
		<div> </div>
		
		
		<div style="margin-bottom: 10px">

    </div>
		<table id="jqGrid"></table>
		<div id="jqGridPager"></div>
			
				</div>
			</div>
		</div>
	</div>
	<div id="dialog_div"></div>
	<div id="tempValue3"></div>
</body>

</html>
jbuduoo iT邦新手 4 級 ‧ 2021-08-23 16:17:13 檢舉
修改 checkOnUpdate=false 就行了。
登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙