代码块
代码块语法遵循标准markdown代码,例如:
pageEncoding="UTF-8"%>
<%@include file="/views/resource.jsp"%>
<body style="background-color: transparent;">
<div class="row no-margin">
<div id="leftlist"
class="page-content page-content-inner margin-control left-container col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="config-title">
内置参数配置
<button id="addparam" type="button" class="btn btn-default">
<i class="glyphicon glyphicon-plus"></i>
</button>
<button id="modifyparam" type="button" class="btn btn-default">
<i class="glyphicon glyphicon-pencil"></i>
</button>
<button id="delparam" type="button" class="btn btn-default">
<i class="glyphicon glyphicon-trash"></i>
</button>
</div>
<div id="param_tab" class="form-group ">
<table class="table " id="tableparam" data-toggle="table">
<thead>
<tr>
<th data-field="select" data-checkbox="true"></th>
<th data-field="param_name">参数名称</th>
<th data-field="param_code">参数编码</th>
</tr>
</thead>
</table>
</div>
<div id="business_tab_none" class="form-group hidden active">
<div class="config-none-center" id="nonetable">
<div class="img-none"></div>
<div class="text-none">
<p>当前状态为空</p>
</div>
</div>
</div>
</div>
<div id="internal_para_right_container"
class="right-container col-xs-8 col-sm-8 col-md-8 col-lg-8 ">
<div>
<p class="margin-control config-title" id="message"
style="display: none">详细信息</P>
<p class="margin-control config-title" id="add"
style="display: none">
新增配置
<button id="save" type="button" class="btn btn-control">
<i class="fa fa-save"></i><span id="addsave"> 保存</span>
</button>
</p>
<p class="margin-control config-title" id="update"
style="display: none">
修改配置
<button id="modify" type="button" class="btn btn-control">
<i class="fa fa-save"></i><span id="modifysave"> 保存</span>
</button>
</p>
</div>
<div class="form-body margin-control" id=listparam>
<div
class="row margin-control col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2 hide">
<label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label">ID:</label>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<input type="text" class="form-control " placeholder=""
data-tabindex="1" id="id" name="id">
</div>
</div>
<div
class="row margin-control col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
<label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label">参数名称:</label>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<input type="text" class="form-control" placeholder=""
data-tabindex="1" id="param_name" name="param_name">
</div>
</div>
<div
class="row margin-control col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
<label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label">参数编码:</label>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<input type="text" class="form-control" placeholder=""
data-tabindex="1" id="param_code" name="param_code">
</div>
</div>
<div
class="row margin-control col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
<label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label">参数类型:</label>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 mt-radio-list"
id="param_type" name="param_type">
<label class="mt-radio mt-radio-outline margin-control"> <input
type="radio" name="radioName" value="1" id=dynamicParameters />动态参数
<span></span>
</label> <label class="mt-radio mt-radio-outline margin-control">
<input type="radio" name="radioName" value="2" id="fixedValue" />固定值
<span></span>
</label>
</div>
</div>
<div
class="row margin-control col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
<label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label">参数数值类型:</label>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<select name="param_data_type" id="param_data_type"
class="form-control">
<option value="1">日期类型</option>
<option value="2">字符串类型</option>
<option value="3">数字类型</option>
</select>
</div>
</div>
<div
class="row margin-control col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
<label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label">参数值:</label>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<input type="text" class="form-control" placeholder=""
data-tabindex="1" id="param_value" name="param_value">
</div>
</div>
<div
class="row margin-control col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
<label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label">参数描述:</label>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<input type="text" class="form-control" placeholder=""
data-tabindex="1" id="param_description" name="param_description">
</div>
</div>
</div>
</div>
<div id=""
class="right-container col-xs-8 col-sm-8 col-md-8 col-lg-8 hidden active">
<div class="config-none-center" id="nonelist">
<div class="img-none"></div>
<div class="text-none"></div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
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;
}
});
})
</script>