bootstrap jsp頁面前後端互動包括html中的Radio與Select的賦值

阿新 • • 發佈：2019-01-01

var i=0; //控制初始化行數 var a;//控制具體進行修改或者刪除或者增加之中的哪個操作 function nonedisplay(){//顯示為空狀態 $('#nonelist').show(); $('#nonetable').show(); } function nonedisappear(){//隱藏為空狀態 $('#nonelist').hide(); $('#nonetable').hide(); } function readOnly(){ //只可讀 var listparam = $('#listparam').find("input"); var

select=$('#param_data_type'); listparam.attr("disabled", "false"); select.attr("disabled", "false"); } function editable(){ //可以編輯 $(':input').removeAttr("disabled"); } function disappearBut(){ //隱藏左上角的修改刪除按鈕 $('#modifyparam').hide(); $('#delparam').hide(); } function displayBut

(){//顯示左上角的修改刪除按鈕 $('#modifyparam').show(); $('#delparam').show(); } function displayTopUpdate(){ //顯示右上角修改配置 $('#update').show(); } function disapperTopUpdate(){ //隱藏右上角修改配置 $('#update').hide(); } function displayTopAdd(){ //顯示右上角新增配置 $('#add').show(); } function disapperTopAdd(){ //隱藏右上角新增配置

$('#add').hide(); } function displayTopMessage(){ //顯示右上角詳細資訊 $('#message').show(); } function disapperTopMessage(){ //隱藏右上角詳細資訊 $('#message').hide(); } function disapperListParam(){ //隱藏右邊列表 $('#listparam').hide(); } function displayListParam(){ //顯示右邊列表 $('#listparam').show(); } function disapperTable(){ //隱藏左邊的table $('#param_tab').hide(); } function displayTable(){//顯示左邊的table $('#param_tab').show(); } function setdata(data){//得到左邊table裡邊的值向右邊的list進行賦值 $('#id').val(data.rows[i].id); $('#param_name').val( data.rows[i].param_name); $('#param_code').val( data.rows[i].param_code); $('#param_description').val( data.rows[i].param_description); $('#param_value').val( data.rows[i].param_value); if (data.rows[i].param_type == "1") { $('#dynamicParameters').prop( "checked", true); } else { $('#fixedValue').prop("checked", true); } ; $('#param_data_type').val(data.rows[i].param_data_type); } function initTable() { $('#tableparam').bootstrapTable('destroy'); $("#tableparam") .bootstrapTable( { method: "get", pagination: true, //分頁 pageNumber: 1, //首頁頁碼 pageSize:10, //頁面資料條數 search: false, sidePagination: "server", //設定在哪裡進行分頁，可選值為 'client' 或者 'server'。設定 'server'時，必須設定伺服器資料地址（url）或者重寫ajax方法 // queryParamsType : "limit", //設定為 'limit' 則會發送符合 RESTFul 格式的引數. striped:true, //method: "get", url: "<%=request.getContextPath()%>/builtinparam/list.do", onClickRow : function(row, tr) { readOnly(); displayTopMessage(); disapperTopAdd(); disapperTopUpdate(); i = tr[0].rowIndex - 1; $('#id').val(row.id); $('#param_name').val(row.param_name); $('#param_code').val(row.param_code); $('#param_description').val(row.param_description); if (row.param_type == 1) { //給radio賦值 $('#dynamicParameters').prop("checked", true); //$("input[type='radio']").eq(0).attr("checked",true); //$("input[type='radio']").eq(1).attr("checked",false); //$("#dynamicParameters").attr("checked", "checked"); } else { $('#fixedValue').prop("checked", true); /* $("input[name='radioName'][value=1]").attr( "checked", true); $("input[name='radioName'][value=0]").attr( "checked", false); */ //$("#fixedValue").attr("checked", "checked"); //$("input[type='radio']").eq(1).attr("checked",true); //$("input[type='radio']").eq(0).attr("checked",false); } if (row.param_data_type == 1) { $('#param_data_type').val("1"); } else if (row.param_data_type == 2) { $('#param_data_type').val("2"); } else { $('#param_data_type').val("3"); } ; $('#param_value').val(row.param_value); }, onLoadSuccess : function(data) { if (data.rows.length == 0) { nonedisplay(); disapperListParam(); disappearBut(); disapperTable(); displayTopMessage(); } else { nonedisappear(); displayTable(); if (a == 0) {//新增重新整理時 displayBut(); i = data.rows.length - 1; setdata(data); } else if (a == 3) {//修改重新整理時(也就是下邊的$table.bootstrapTable("refresh", a = 3);這個方法執行時) displayTopUpdate(); setdata(data); } else { //剛進來頁面或者刪除重新整理時 displayTopMessage(); disapperTopAdd(); disapperTopUpdate(); readOnly(); setdata(data); } } } }); } $(function() { initTable(); //readOnly(); var $table = $('#tableparam'); $('#addparam').click(function() { displayListParam(); editable(); displayTopAdd(); disapperTopMessage(); disapperTopUpdate(); $('#nonelist').hide(); $('#param_name').val(""); $('#param_code').val(""); $('#param_value').val(""); $('#param_description').val(""); }); $('#addsave') .click( function() { var url = "${pageContext.request.contextPath}/builtinparam/insert.do"; // var radio=document.getElementsByName('toasts'); //var radioN=radio[0].checked?radio[0].value:radio[1].value;//.checked用來判斷是否被選中這兩行相當於下邊的一行，都是獲取radio選中的數值的方法 var option = { param_name : $('#param_name').val(), param_code : $('#param_code').val(), param_type : $( "input[name='radioName']:checked") .val(),//獲取radio選中的值的方法 param_data_type : $('#param_data_type').val(), param_value : $('#param_value').val(), param_description : $('#param_description') .val() }; etl.ajaxJson(url, option, function(data) { //$table.bootstrapTable("refresh",{silent: true}); readOnly(); $table.bootstrapTable("refresh", a = 0); }); }); $('#modifyparam').click(function() { editable(); $('#update').show(); $('#add').hide(); $('#message').hide(); }); $('#modifysave') //根據這個id得到修改這個按鈕的值 .click( function() { var url = "${pageContext.request.contextPath}/builtinparam/update.do"; // EL表示式得到專案部署的路徑的寫法 var option = { id : $('#id').val(), param_name : $('#param_name').val(), param_code : $('#param_code').val(), param_type : $( "input[name='radioName']:checked") .val(),//獲取radio選中的值的方法 param_data_type : $('#param_data_type').val(), param_value : $('#param_value').val(), param_description : $('#param_description') .val() }; etl.ajaxJson(url, option, function(data) { readOnly() $table.bootstrapTable("refresh", a = 3); }); }); $('#delparam') .click( function() { var rows = $table.bootstrapTable("getSelections"); if (rows.length < 1) { alert("請至少選擇一個!"); return true; } if (confirm("確認刪除？")) { var ids = []; $.each(rows, function(index, row) { ids.push(row.id); }); etl .ajaxJson( "${pageContext.request.contextPath}/builtinparam/del.do", { ids : ids }, function(data) { $table.bootstrapTable( "refresh", i = 0, a = 2); }) } else { return true; } }); })

bootstrap jsp頁面前後端互動包括html中的Radio與Select的賦值

bootstrap jsp頁面前後端互動包括html中的Radio與Select的賦值

jsp前後端互動以及請求轉發和請求包含

一個原生的靜態html專案需要前後端互動或測試的時候怎麼辦呢？（在本地開啟http服務）

前後端互動方式（同一頁面並行開發、變數傳遞）

html 與php+MySQL完成前後端互動

怎樣解決jsp:include標簽在包括html文件時遇到的亂碼問題

基於Node.js的ajax前後端互動的例子

springboot+mybatis+thymeleaf專案搭建及前後端互動

類Flask實現前後端互動之程式碼聊天室

如何使用ajax實現多條刪除及前後端互動

Atitit 前後端互動模式目錄 1.1. Ajax 1 1.2. Fetch api 1 1.3. 服務端指令碼模式（簡單快速） 1 1.4. 瀏覽器注入物件、函式 1 1.5. 瀏覽器外掛模式

BigDecimal/Long 前後端互動失去精度解決方法

PHP 前後端互動獲取AUTHORIZATION認證

初識 vue —— 最簡單的前後端互動示例

學習學習Spring，前後端互動方式

教你搭一個簡單的前後端互動小網站

Servlet實現前後端互動的原理及過程解析

ajax 前後端互動

【前後端互動版】JAVA匯出資料到Excel表格

layui進行分頁處理，後端返回資料沒有count欄位，需要單獨獲取再新增到資料中，再進行項渲染，另有layui表格資料增刪改查前後端互動

bootstrap jsp頁面前後端互動 包括html中的Radio與Select的賦值

相關推薦

bootstrap jsp頁面前後端互動包括html中的Radio與Select的賦值