bootstrap jsp页面前后端交互 包括html中的Radio与Select的赋值

最新推荐文章于 2021-11-17 14:22:40 发布
最新推荐文章于 2021-11-17 14:22:40 发布
阅读量3.7k 收藏
点赞数
分类专栏： 前台jsp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29720781/article/details/53943353
版权

代码块

代码块语法遵循标准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">&nbsp;&nbsp;保存</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">&nbsp;&nbsp;保存</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>
想当大叔的段子手
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【ASP.NET】第七课——数据绑定和 GridView 控件的使用
王迪
07-31 6559
知识点：理解ASP.NET 中数据绑定的概念、掌握数据绑定表达式语法 、掌握 GridView 的用法 1、 数据绑定 1.1 数据绑定概述 数据绑定是指将数据源中的数据与页面中的元素进行对应的操作。通过用户界面（UI）来显 示数据，是制作网页时经常需要处理的问题之一。在第二课中，我们已经学会了使用 ASP.NET 提供的控件将数据简单的呈现在页面上。如用 Label、TextBox 呈现单个数据，列表控件如 DropDrownList 可以呈现数据源中某一项数据等。用表格来...
java前后端交互练手项目+SpringBoot、Jquery、BootStrap!
05-09
SpringBoot项目，专门练习前后端交互，既有前端框架，又有后端框架。 说明：前端很多错误，专门用来练习前端改错！！！！ 后端模块众多，根据自己的能力来完成！！！！ 需要学习前后端的小伙伴，一定要做完这个...
Bootstrap框架中单选框radio赋值的写法
奋斗的秋天的博客
07-15 2686
<div class="col-sm-1"> <div class="form-group"> <label class="rdio check-box"> <input type="radio" name="factory" value="1">工厂 </label> </div> </div> <script> //正常单选框赋值...
Bootstrap学习笔记——表单
gengfu_php的博客
10-02 999
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基础表单</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <bo
DataField 取selectedDate值
zoeyzz的专栏
05-12 463
startDF.formatString="YYYY-MM-DD"; var start:Date=startDF.selectedDate; 这样取到的值就不会是null。
bootstrap radio-list 赋值
火龙果的专栏
05-28 926
取上一级span加上checked样式就可以了 $("input:radio[name='IsDoubleEntry'][value='true']").parent('span').addClass('checked');
bootstrap下拉框动态赋值方法
10-18
Bootstrap是一种流行的前端...总之，Bootstrap下拉框动态赋值方法是前端开发中常用且实用的技术点，它能有效地将后端数据与前端界面结合，实现数据的动态展示。掌握这一点对于进行响应式网页开发和维护具有重要意义。
易买网静态项目模板,用于前后端交互,完整版
06-20
【易买网静态项目模板】是一款专为初学者设计的前端网页模板，旨在提供一个基础的前后端交互框架，帮助学习者快速上手并实践完整的Web项目开发。这个模板包含了必要的静态页面，如首页、商品展示、购物车、用户登录...
本科毕业设计-基于Bootstrap-Flask开发的学员管理系统，数据库使用SQLLite、采用前后端分离技术
最新发布
06-23
前端页面使用Bootstrap-Flask编写，基于Jinja2模板引擎语法 使用Flask-WTF进行表单交互 使用SQLAlchemy进行数据库连接与操作 数据库使用Sqlite3 基于BootstrapFlask框架Demo进行开发，实现了登录、身份认证、密码...
简单通用登录页面模板 bootstrap登录页面 html页面
01-18
登录页面是用户与网站交互的第一步，因此需要简洁明了，同时具备足够的安全性。这个模板提供了一个基础的登录表单，包括用户名和密码输入框，通常还会有“记住我”选项、密码找回链接以及登录按钮。设计时，要考虑...
单选框设置初始值
YKYZSYA的博客
07-23 819
<c:choose> <%--emp.sex是查到的初始值--%> <c:when test="${emp.sex=='男'}"> <input type="radio" name="sex" value="男" checked="checked">男 <input type="radio" name="sex" value="女">女 </c:when>
若依框架，bootstrap table的自定义初始化查询条件赋值
qq_35315439的博客
05-08 5118
父页面点击查询，附带查询条件，传值另一页面 /*搜索后的企业列表，点击详情，在原页面上更新详情页*/ function toQykDetail(comName) { /* var prefix = ctx + "system/gxqTyc";*/ /* search("5");*/ /* $.modal.openTab("天眼查企业库详情",...
radio取值和赋值
热门推荐
moke的博客
08-09 1万+
1、获取radio选中的值 $("input[name='***']:checked").val(),//***代表radio的name属性名称 2、根据条件来赋值 if(true){ $("input[name='***'][value=1]").attr("checked",true); }else{ ...
bootstrap-duallistbox初始化和取值
WiLL_XS的博客
04-20 2450
bootstrap-duallistbox双选列表 效果图如下： 如何将后台数据进行填充，然后取出选中的值呢。我们一步一步来。 HTML中引入相关JS，CSS标签 <select id="drkj" class="form-control dual_select" multiple> </select> ...
radio单选框取值赋值
失败只有一种，那就是半途而废
11-17 607
radio单选框取值赋值html内容取值赋值 html内容 <input type="radio" name="isuse" value="1" title="启用" checked=""> <input type="radio" name="isuse" value="0" title="禁用"> 取值 let isuse = $('input[name="isuse"]:checked').val();//是否禁用 赋值 $("input[name=isuse][valu
html checkbox获取,html中radio，checkbox值的获取、赋值、注册事件
weixin_36051281的博客
06-07 1166
1，radio分组只要name一样，就是一组的，即一组中只能选择一个，如下：代码如下:group1:radio1radio2radio3group2:radio4radio5radio6效果如下：2，获取选中的radio节点使用jquery可以很方便做到，先选择group，然后过滤出checked的，如下：代码如下:var group1 = $("[name='group1']").filter(...
AJAX 赋值html(bootstrap)
PSW_18722821243的博客
02-12 822
一：js /*ajax查看胜率*/ function queryRanking(){ $.ajax({ type:"POST", dataType:'json', async:true,//同步 url:"${pageContext.request.contextPath}/queryMyInfo....
html单选框 bootstrap模态框里面的单选框 和jq取值 案例
popcjz的博客
12-07 3996
html文件里的简单的单选框： &lt;div class="form-group has-feedback"&gt; 账单分类:&lt;br/&gt; &lt;input type="radio" class="control-label" id="richang" value="日常支出" name="category" ch
Bootstrap框架中radio设置值
weixin_30892037的博客
06-26 8550
Bootstrap中的radio设置值不能像我们平常给普通radio赋值那样，因为无效。 我们用Bootstrap框架里的radio组件，代码： <div class="radio-list"> <label> <input type="radio" value="1" name="gender" data-title=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值