2019-06-04 11:28:55 weixin_41983443 阅读数 1235
  • Bootstrap开发框架视频教程

    Bootstrap入门培训课程,Bootstrap是由Twitter推出的一个前台页面开发框架,在行业之中使用较为广泛。该视频教程包括Bootstrap开发入门、十二栅格布局、CSS基础样式、表单样式、CSS基础样式、表单样式、扩展组件、导航组件、高级组件等内容。此开发框架包含了大量的CSS、JS程序代码,可以帮助开发者(尤其是不擅长页面开发的程序人员)轻松的实现一个不受浏览器限制的精美界面效果。

    4705 人正在学习 去看看 李兴华

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/bootstrap-table.css" rel="stylesheet">
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>

    <title>Title</title>
    <script>
        $(document).ready(function () {
            var x=" ";
            var users = [
                { "id":"1","name":"roob" ,"password":"123" ,"isAdmin":"1"},
                { "id":"2","name":"goog" , "password":"456" ,"isAdmin":"0"},
            ];
            for (i in users) {
              x="<tr><td>" +"<input type='checkbox'/>"+ "</td>"+"<td>"+users[i].id+"</td>"+"<td>" +users[i].name+ "</td>"+"<td>" +users[i].password + "</td>"+"<td>" +users[i].isAdmin + "</td></tr>";
                $("#tb").append(x);
            }
        })
        //发送一个 HTTP POST 请求页面并获取返回内容
        // $(document).ready(function(){
        //     $("#button1").click(function(){
        //         $.post("/try/ajax/demo_test_post.php",{
        //                 name:"菜鸟教程",
        //                 url:"http://www.runoob.com"
        //             },
        //             function(data,status){
        //                 alert("数据: \n" + data + "\n状态: " + status);
        //             });
        //     });
        // });
        //保存用户信息
        function saveUser() {
            $.ajax({
                url: "http//:wwww.baidu.com",//获取数据的URL
                data:$(".fm").serialize(),//前端将数据给后端
                type: "POST",//HTTP请求方法
                dataType : 'JSON',//获取数据执行方式
                success:function(data){
                    if(data.status == 'True'){//传入为JSON对象格式
                        alert('连接成功');
                    }
                    else{
                        $("#labletip").show();
                    }
                },
                error:function(err){
                    alert('连接失败');
                }
            });
        }

        function editUser(){//data-toggle="modal"  data-target="#myModal-1"    //模态框
            var vals = [];
           // var x=0;//记录选中的数据下标值,从0开始
            $('input:checkbox:checked').each(function (index, item) {
                vals.push($(this).val());
            }
            );
            if(vals.length<1||vals.length>=2) {
                $("#editButton").removeAttr("data-target");

                //$("editButton").removeAttr("data-target");
                alert("请选择一条数据");
            } else {
                //回显数据
                var userArr=new Array();
                var i=0;
                $('input:checkbox:checked').parent().siblings().each(function (index) {
                    //userArr[i++].push($(this).val());
                    userArr[i++]=$(this).text()
                    //alert($(this).text());
                })//id="username-1"
                // $("#myModal-1").find("input").each(function () {
                //     if($(this)[i])
                // })
                //var y=userArr[1];
                $("input[id='username-1']").val(userArr[1]);
                $("input[id='pwd-1']").val(userArr[2]);
                $("input[id='addre-1']").val(userArr[3]);
                //数据显示在模态框
                $("#editButton").attr("data-target","#myModal-1");

            }
        };
        //删除用户
        function deleteUser() {
            var vals = [];
            $('input:checkbox:checked').each(function (index, item) {
                    vals.push($(this).val());
                }
            );
            if(vals.length<1) {
                //$("#editButton").removeAttr("data-target");

                //$("editButton").removeAttr("data-target");
                alert("请至少选择一条数据");
            }
            else{
                var userArr=new Array();
                var i=0;
                $('input:checkbox:checked').parent().siblings().each(function (index) {
                    //userArr[i++].push($(this).val());
                    userArr[i++]=$(this).text()
                    //alert($(this).text());
                })//id="username-1"
                // $("#myModal-1").find("input").each(function () {
                //     if($(this)[i])
                // })
                //var y=userArr[1];
                alert("要删除数据的id为:"+userArr[0]);

            }

        }

    </script>
</head>
<body>

    <!--工具栏-->
    <div class="toolbar" style="height: 100px">
        <ul class="nav nav-pills">
            <li role="presentation" class="active" >
                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" ><i class="glyphicon glyphicon-plus-sign"></i>
                新增
                </button>
            </li>
            <li role="presentation"class="active">
                <button id="editButton" onclick="editUser()" type="button" class="btn btn-primary btn-lg" data-toggle="modal"><i class="glyphicon glyphicon-edit"></i>
                修改
                </button>
            </li>
            <li role="presentation"class="active">
                <button id="deleteButton" onclick="deleteUser()" type="button" class="btn btn-primary btn-lg" data-toggle="modal"><i class="glyphicon glyphicon-remove"></i>
                删除
                </button>
            </li>
            <li role="presentation" class="active dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" style="width:110px;height: 46px ">
                    操作设置<span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    ...
                </ul>
            </li>
        </ul>
    </div>
    <!--显示表格-->
    <div>
        <table class="table table-striped" id="tb">
            <tr>
                <th>选中</th><th>id</th><th>用户名</th><th>密码</th><th>是否管理员</th>
            </tr>

        </table>
    </div>
    <!-- Modal 添加模态框-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title" id="myModalLabel">新增用户信息</h2>
                </div>
                <div class="modal-body">
                    <form class="fm">
                        <table class="table table-hover table-bordered">
                            <tr>
                                <th>用户名</th>
                                <td><input type="text" name="username" class="form-control" id="username" /></td>
                            </tr>
                            <tr>
                                <th>密码</th>
                                <td><input type="password" name="password" class="form-control" id="pwd" /></td>
                            </tr>
                            <tr>
                                <th>是否管理员</th>
                                <td><input type="text" name="idAdmin" class="form-control" id="addre" /></td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" id="button1" class="btn btn-primary" onclick="saveUser()" >Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal 编辑模态框-->
    <div class="modal fade" id="myModal-1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel-1">编辑用户信息</h4>
                </div>
                <div class="modal-body">
                    <form class="fm">
                        <table class="table table-hover table-bordered">
                            <tr>
                                <th>用户名</th>
                                <td><input type="text" name="username" class="form-control" id="username-1" /></td>
                            </tr>
                            <tr>
                                <th>密码</th>
                                <td><input type="password" name="password" class="form-control" id="pwd-1" /></td>
                            </tr>
                            <tr>
                                <th>是否管理员</th>
                                <td><input type="text" name="idAdmin" class="form-control" id="addre-1" /></td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" id="button1-1" class="btn btn-primary" onclick="saveUser()" >Save changes</button>
                </div>
            </div>
        </div>
    </div>

</body>
</html>
2018-09-15 21:59:26 nanfeng_fable 阅读数 7657
  • Bootstrap开发框架视频教程

    Bootstrap入门培训课程,Bootstrap是由Twitter推出的一个前台页面开发框架,在行业之中使用较为广泛。该视频教程包括Bootstrap开发入门、十二栅格布局、CSS基础样式、表单样式、CSS基础样式、表单样式、扩展组件、导航组件、高级组件等内容。此开发框架包含了大量的CSS、JS程序代码,可以帮助开发者(尤其是不擅长页面开发的程序人员)轻松的实现一个不受浏览器限制的精美界面效果。

    4705 人正在学习 去看看 李兴华

      Bootstrap中的模态框插件以弹出对话框的形式出现,具有最小和最实用的功能集,主要的是使用起来很灵活!有以下几个特性:(1)不支持同时打开多个模态框;(2)务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组件影响模态框的展现和功能。

1、modal分为静态框和动态框:

     (1)下面是最简单的modal的静态示例,也是最基础的modal样式:

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

                           

     (2)除静态样式外,还有更常用的动态样式(即通过点击等方式弹出模态框):

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

                                           

2、至于模态框中的内容,几乎可以添加常用的所有东西,比如表单组、列表等各种DOM,样式如下:

                               

                               

       由于篇幅关系,在这里只提供下样式,具体的HTML写法可以参照官网: https://v3.bootcss.com/javascript/#modals;里面还有详细讲述modal插件的属性以及事件信息,感兴趣的话可以自行查阅。

3、下面是个人使用modal的示例,实现了动态模态框实时显示SGS服务器(Skyline Global的服务器)中的图层列表并添加复选框,还实现了将选中图层添加到二维三维窗口的功能。听着是不是很神奇,刚开始接触的时候我自己觉得肯定做不到,这里有前后端交互,XML文件解析,模态框数据传入传出、动态表格创建等等一揽子难题(小白很慌),但是后来还是硬着头皮一点点将这块骨头啃下来了,这也给我莫大的信心。再大的问题从细小处着手化为一些列小问题,然后各个击破,最终会发现一切难题迎刃而解。不扯了,还是跟大家分享下成果:

<div tabindex="-1" class="modal fade in" id="myModal" role="dialog" aria-hidden="true" aria-labelledby="myModalLabel" style="display: block;">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button class="close" aria-hidden="true" type="button" data-dismiss="modal">
                                ×
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                请选择要添加的数据
                            </h4>
                        </div>
                        <div class="modal-body" id="tanchu">
                            <div class="bs-example" data-example-id="hoverable-table">
                                <table class="table table-hover" id="btable">
                                    <thead>
                                    <tr>

                                        <th>#</th>
                                        <th>名称</th>
                                        <th>类型</th>
                                        <th>记录数</th>
                                    </tr>
                                    </thead>
                                    <tbody id="tableble">

                                    <tr id="1"><td id="chebox0"><input name="num1000.398445" class="checkbox" type="checkbox"></td><td>num1000.398445</td><td>XML</td><td>979</td></tr><tr id="2"><td id="chebox1"><input name="Fairfax_zones.397739" class="checkbox" type="checkbox"></td><td>Fairfax_zones.397739</td><td>XML</td><td>471</td></tr><tr id="4"><td id="chebox2"><input name="World_Capital.397738" class="checkbox" type="checkbox"></td><td>World_Capital.397738</td><td>XML</td><td>331</td></tr><tr id="7"><td id="chebox3"><input name="_3dml1.397337" class="checkbox" type="checkbox"></td><td>_3dml1.397337</td><td>XML</td><td>226</td></tr><tr id="11"><td id="chebox4"><input name="hyd2_4l.397336" class="checkbox" type="checkbox"></td><td>hyd2_4l.397336</td><td>XML</td><td>708</td></tr><tr id="16"><td id="chebox5"><input name="building.397335" class="checkbox" type="checkbox"></td><td>building.397335</td><td>XML</td><td>837</td></tr></tbody>
                                </table>

                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-default" type="button" data-dismiss="modal">关闭
                            </button>
                            <button class="btn btn-primary" onclick="intimenu()" type="button">
                                添加
                            </button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>

                                     

当然代码中table为动态生成, 实现过程为获取后台返回的XML文件并解析获得图层名,再实现table动态创建,样例代码如下:

 for (var i=0;i<tanchus.length;i++)
    {
        var m = document.createElement("tr");
        m.setAttribute("id",k);
        document.getElementById("tableble").appendChild(m);


        var m5 = document.createElement("td");
        m5.setAttribute("id","chebox"+i);
        document.getElementById(k).appendChild(m5);

        var m6 = document.createElement("input");
        m6.setAttribute("type","checkbox");
        m6.setAttribute("class","checkbox");
        m6.setAttribute("name",tanchus[i]);
        document.getElementById("chebox"+i).appendChild(m6);

        var m2 = document.createElement("td");
        m2.innerText=tanchus[i];
        document.getElementById(k).appendChild(m2);

        var m3 = document.createElement("td");
        m3.innerText="XML";
        document.getElementById(k).appendChild(m3);

        var m4 = document.createElement("td");
        m4.innerText=Math.ceil(Math.random()*1000);
        document.getElementById(k).appendChild(m4);

        k=k+i+1;
    }

至于将选中的图层添加到相应二三维窗口的实现思路为:获取table中所有的checkbox,遍历并记录选中状态的check,到这里又有同学问知道了checkbox的状态又能怎样,该怎么获取相应行的图层名呢?这里我耍了点小心机,规避了一个技术问题(不知道是好是坏),我将checkbox的name设置成了图层名,直接读取相应的name属性就好了。

var strIds=new Array();
 var get = $(".checkbox");
    for (i = 0 ; i < get.length; i++) {
        if (get[i].checked) {
            strIds.push(get[i].name);
        }
    }

 嘿嘿,大体上就是这些内容了,自觉还有很多地方都不太成熟老练,希望大佬们如果对我有所指教的可以私信我哦,万分感谢!

2018-10-29 14:38:58 weixin_42803027 阅读数 296
  • Bootstrap开发框架视频教程

    Bootstrap入门培训课程,Bootstrap是由Twitter推出的一个前台页面开发框架,在行业之中使用较为广泛。该视频教程包括Bootstrap开发入门、十二栅格布局、CSS基础样式、表单样式、CSS基础样式、表单样式、扩展组件、导航组件、高级组件等内容。此开发框架包含了大量的CSS、JS程序代码,可以帮助开发者(尤其是不擅长页面开发的程序人员)轻松的实现一个不受浏览器限制的精美界面效果。

    4705 人正在学习 去看看 李兴华

bootstrap modal模态框

因为项目中用到了bootstrap table 显示表格且要为每一行设置一个按钮要就能查看信息,所以就直接用bootstrap带的模态框,但是有个缺点就是异步的时候比较慢,体验不是特别的好,至于后来换哪种弹框在本文结尾会叙述。

modal bootstrap

首先,先引入bootstrap.js和.css文件,如果要是跟我一样使用bootstrap table还需要进入table的相关js和css 文件

<link href="/BOLI_JT/static/bootstrap/3.3.4/css_default/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script src="/BOLI_JT/static/bootstrap/3.3.4/js/bootstrap.min.js"  type="text/javascript"></script>
<link href=" ${ctxStatic}/bootstrap-table-master/dist/bootstrap-table.min.css" rel="stylesheet">
<script type="text/javascript" src="${ctxStatic}/bootstrap-table-master/dist/bootstrap-table.min.js"></script>
<script src="${ctxStatic}/bootstrap-table-master/src/locale/bootstrap-table-zh-CN.js"></script>

###添加按钮
在这里插入图片描述


	  function operateFormatter(value, row, index) {
	      return [
	      '<button id="adjustButton" type="button" class="btn btn-info btn-xs" style="margin-right:15px;">调整</button>'	
	      ].join('');
	      }
	  
	  window.operateEvents = {
	            "click #adjustButton": function (e, value, row, index) {    
	            /*  $("#teamId").val(row.teamId);
	             $("#updateTime").val(row.startTime);
	             $("#planIds").val(row.planId); */
	             $("#myModal").modal({
	            	 remote:"${ctx}/plan/blPlanAdjustment/adjustmentForm?id="+row.id
	             });                     
	         }
	           
	    };
	  

如代码所示,使用.modal()方法就可以为你定义的模态框显示了,其中,remote 中填写的地址返回的是一个页面,这样就可以将该页面加载在modal中了。

 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-    labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
           
        </div>
    </div>
</div> 

这三个div是需要你写在你想触发点击事件的页面中的,然后通过remote就会将页面和数据显示在modal-content中,缺点就是如果你也是这么用的,那么在你要加载进模态框中页面中,用不了form.validate()中的ajaxSubmit,所以只能自己在该页面为按钮设置点击时间,进行相应的操作。别忘了事件要写在 $(function () { });中,否则是不会有效果的。

 <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
           <h4 class="modal-title" id="myModalLabel">调整页面</h4>
     </div>
       <div class="modal-body">
			<form:form id="inputForm" modelAttribute="blPlanAdjustment" method="post" class="form-horizontal">
			<form:hidden path="id"/>
			<sys:message content="${message}"/>	
			 <fieldset>
			    <div class="form-group">
			       <label class="col-sm-1 control-label" style="font-size:13px;"><font color="red">*</font>计划:</label>
			       <div class="col-sm-4">
						<form:input path="planId" value="${blPlanTeam.planId}" readonly="true" htmlEscape="false" class="form-control" style="width:200px;"/>	
					</div>
			    </div>	
			    
			    <div class="form-group">
				   <label class="col-sm-1 control-label" style="font-size:13px;"><font color="red">*</font>班组:</label>
			        <div class="col-sm-4">
						<form:input path="teamId" value="${blPlanTeam.teamId}" readonly="true" htmlEscape="false" class="form-control" style="width:200px;"/>	
					</div>	
			    </div>	
			        <div class="form-group">
				   <label class="col-sm-1 control-label" style="font-size:13px;"><font color="red">*</font>分配日期:</label>
			        <div class="col-sm-4">
						<form:input path="updateTime" value="${blPlanTeam.startTime}" readonly="true" htmlEscape="false" class="form-control" style="width:200px;"/>	
					</div>	
			    </div>	
			    <div class="form-group">
		    	    <label class="col-sm-1 control-label"  style="font-size:13px;"><font color="red">*</font>调整数量:</label>
					<div class="col-sm-4">
					   <form:input path="adjustmentNumbers" htmlEscape="false" placeholder="请输入调整数量" class="form-control required" style="width:200px;"/>
					</div>
			     </div>		
			   <div class="form-group">		
					<label class="col-sm-1 control-label"  style="font-size:13px;"><font color="red">*</font>调整原因:</label>
					<div class="col-sm-4">
					   <form:textarea path="adjustmentDesc" rows="6" cols="40" />
				    </div>	 
			     </div>		
			     <!--  <div class="panel-footer" align="right">			
				     <button type="submit" class="btn btn-primary">调整计划</button>
		         </div>	 -->		        
			 </fieldset>
		</form:form>
		</div>
          <div class="modal-footer">
                <button type="submit" id ="fromSubmit" class="btn btn-primary">调整</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>            
         </div> 
	 

这些是要加载到模态框中的页面信息,后台代码我就不多叙述了,效果如下
在这里插入图片描述
但是就如文章开头说的一样,加载时会比较慢,体验不是特别好。

另一种弹框

我在项目中采用的另一种弹框,是layer插件

  top.layer.open({
					    type: 2,  
					    area: ['1000px', '500px'],
					    title:"调整计划",
					    name:'friend',
					    content: "${ctx}/plan/blPlanAdjustment/adjustmentPlanForm?id="+row.id,
					    /* btn: ['调整', '关闭'],
					    yes: function(index, layero){
					 	    
						  },
						  cancel: function(index){
							  
					      } */
					});

这样实现的效果跟之前的模态框有点差距但是不大,完全可以替换,功能也是可以实现,而且,在加载时,比模态框要快,体验更好。
在这里插入图片描述
可能页面效果没有那个好看,但是加载的要快,所以也就暂时做了两个版本的弹框,以供选择。

离线写博客

本文为本人根据项目需求研究写出,也许有所不足,真诚的希望,有大牛能帮我纠正一下,我的错误,互相提高,以便以为可以分享更好的代码和技术给大家,携手在研发的道路上一去不复返。

2017-07-20 17:35:48 qq_34639724 阅读数 22878
  • Bootstrap开发框架视频教程

    Bootstrap入门培训课程,Bootstrap是由Twitter推出的一个前台页面开发框架,在行业之中使用较为广泛。该视频教程包括Bootstrap开发入门、十二栅格布局、CSS基础样式、表单样式、CSS基础样式、表单样式、扩展组件、导航组件、高级组件等内容。此开发框架包含了大量的CSS、JS程序代码,可以帮助开发者(尤其是不擅长页面开发的程序人员)轻松的实现一个不受浏览器限制的精美界面效果。

    4705 人正在学习 去看看 李兴华

bootstrap表格添加按钮、模态框实现

- 需求:

需要表格后面每一列后面都有“添加”“删除”按钮。如下图


这里写图片描述

- 源码如下

   <script>
   function operateFormatter(value, row, index) {
      return [
      '<button type="button" class="RoleOfdelete btn btn-primary  btn-sm" style="margin-right:15px;">删除</button>',

      '<button type="button" class="RoleOfedit btn btn-primary  btn-sm" style="margin-right:15px;">修改</button>'
      ].join('');
      }
   </script>
    window.operateEvents = {
            'click .RoleOfdelete': function (e, value, row, index) {
                alert(row.dno);            
         },
            'click .RoleOfedit': function (e, value, row, index) {
                $("#editModal").modal('show');

            }
    };
 columns: [{ //编辑datagrid的列
                title : '序号',
                field : 'did',
                align : 'center',
                checkbox : true
            }, {
                field : 'dno',
                title : '动态编号',
                width : 80
            }, {
                field : 'userInfo',
                title : '账号',
                width : 80,
                formatter : function(value, row, index) {
                    if (row.userInfo) {
                        return row.userInfo.userName;
                    } else {
                        return value;
                    }
                } 

            },
            {
                field : 'userInfo.name',
                title : '昵称',
                formatter : function(value, row, index) {
                    if (row.userInfo) {
                        return row.userInfo.name;
                    } else {
                        return value;
                    }
                },width : 50
            },
            {
                field : 'date',
                title : '日期',
                width : 80
            }, {
                field : 'title',
                title : '标题',
                width : 100
            }, {
                field : 'text',
                title : '内容',
                width : 100
            }, {
                field : 'images',
                title : '图片',
                width : 100
            }, {
                field : 'viedo',
                title : '视频',
                width : 100
            } , {
                field : 'record',
                title : '语音',
                width : 100
            }, {
                field: 'operate',
                title: '操作',
                align: 'center',
                width : 100,
                events: operateEvents,
                formatter: operateFormatter
                }],
           pagination:true
        });

- 解释

在最后一个colums里 ,添加一个event响应事件 event:operateEvents
colums里formatter:operateFormatter 返回两个按钮。
button中 class=”RoleOfdelete“ 在事件里通过 click .RoleOfedit 调用button 类
响应通过funtion()来实现


模态框

- 需求:

  • 点击search搜索,弹出模态框显示搜索条件,实现查询。
  • 如图下图这里写图片描述

- 源码

  <!-- 查询的模态对话框 -->
        <div id="myModal" class="modal fade"  role="dialog"   aria-hidden=true>
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">
                    <i class="icon-pencil"></i>
                    <span id="lblAddTitle" style="font-weight:bold">查询</span>
                </h4>
            </div>
                <div class="modal-body" style="text-align:center;">
                    <form  id ='searchForm' class="bs-example bs-example-form" role = "form">
                            <div class = "input-group" > 
                                <span class="input-group-addon text-center"><i class="icon-th"></i></span>
                                <input type = "text" class=" form-control" name="dno"
                                id="sd.dno" placeholder="动态编号">
                            </div>
                            <div class = "input-group">
                                <span class = "input-group-addon"><i class="icon-th"></i></span>
                                <input type = "text" class = "form-control"  placeholder="账号" name="userName"
                                id="sd.userInfo.userName">
                            </div>

                            <div class = "input-group" >
                                <span class="input-group-addon text-center"><i class="icon-th"></i></span>
                                <input type = "text"  class=" form-control" name="name"
                                id="sd.userInfo.name" placeholder="昵称">
                            </div>
                            <div class = "input-group" >

                                <span class="input-group-addon text-center"><i class="icon-th" ></i></span>
                                <input type = "text"  class=" form-control" name="title"
                                id="sd.title"  placeholder="标题关键字">
                            </div>
                            <div class = "input-group" >
                                <span class="input-group-addon text-center"><i class="icon-th"></i></span>
                                <input type = "text"  class=" form-control"  name="text"id="sd.text"  placeholder="内容关键字" >
                            </div>
                    </form>
                </div>
                <div class="modal-footer bg-info">
                    <input type="hidden" id="ID" name="ID" />
                    <button type="submit" class="btn btn-primary"  onclick =search()>确定</button>
                    <button type="button" class="btn green" data-dismiss="modal">取消</button>
                </div>
            </form>
        </div>
    </div>
</div>

    function search()
        {

        var opt = {     
                        url: 'doDynamicsList',
                        silent: true,
                        query:{
                            'sd.dno':searchForm.dno.value,
                            'sd.userInfo.userName':searchForm.userName.value,
                            'sd.userInfo.name':searchForm.name.value,
                            'sd.title':searchForm.title.value,
                            'sd.text':searchForm.text.value
                        }
                    };
        $('#myModal').modal('hide');

        $("#table").bootstrapTable('destroy'); 
        $('#test').bootstrapTable('refresh',opt);  


        }

- 解释

搜索按钮响应模态框 :通过data-target=”#模态框的id”

  <button  id = "btnsearch"  type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 

   <span class="glyphicon glyphicon-search"><i class="icon-search"></i></span> Search

获取表单里面的值,放入opt里,加入请求的url。重新发送一次请求给后台
重新表格参数发送是需要先摧毁再添加

function search()
        {

        var opt = {     
                        url: 'doDynamicsList',
                        silent: true,
                        query:{
                            'sd.dno':searchForm.dno.value,
                            'sd.userInfo.userName':searchForm.userName.value,
                            'sd.userInfo.name':searchForm.name.value,
                            'sd.title':searchForm.title.value,
                            'sd.text':searchForm.text.value
                        }
                    };
        $('#myModal').modal('hide');

        $("#table").bootstrapTable('destroy'); 
        $('#test').bootstrapTable('refresh',opt);  


        }
2017-03-29 13:51:45 u013290987 阅读数 412
  • Bootstrap开发框架视频教程

    Bootstrap入门培训课程,Bootstrap是由Twitter推出的一个前台页面开发框架,在行业之中使用较为广泛。该视频教程包括Bootstrap开发入门、十二栅格布局、CSS基础样式、表单样式、CSS基础样式、表单样式、扩展组件、导航组件、高级组件等内容。此开发框架包含了大量的CSS、JS程序代码,可以帮助开发者(尤其是不擅长页面开发的程序人员)轻松的实现一个不受浏览器限制的精美界面效果。

    4705 人正在学习 去看看 李兴华

使用Bootstrap前端框架简单实现表格的加载,废话不多说直接看代码。


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<%@ include file="/WEB-INF/views/common/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>


    <%@ include file="/WEB-INF/views/common/meta.jsp" %>
    <%@ include file="/WEB-INF/views/common/include.jsp" %>


    <style type="text/css">
        .search-body{
            display: none;
            position: absolute;
            width: 400px;
            background-color: white;
            border: 1px solid #C5D0DC;
            z-index: 999;
            padding: 10px;
            margin: 0;
            max-height: 400px;
            overflow-y: scroll;
        }
        .search-body li{
            list-style: none;
        }
        .search-body li:hover{
            background-color: rgb(238, 238, 238);
        }
        .search-panel{
            margin-bottom: 40px;
            padding: 10px;
        }
    </style>
</head>


<script type="text/javascript">
$(document).ready(function() {
initFrameHeight();
var sysIdName = $("#sysIdName").val();
initAlarmTable(sysIdName);
});

function  search(){
var sysIdName = $("#sysIdName").val();
initAlarmTable(sysIdName);
}

function toPortraitAdvancedQuery(){
window.location.href="${ctx}/portrait/tagResult/portraitAdvancedQuery";
}

function toPortraitDataDetail(){
window.location.href="${ctx}/portrait/tagResult/portraitDataDetail";
}
</script>
<body style="height: 1000px;">
<div class="container-fluid">
    <div style="height: 55px;">
        <div class="form-inline">
          <div class="col-lg-12 col-md-12">
<div class="col-lg-2 col-md-2">
<input class="form-control " id="sysIdName" type="text"  maxlength="30" placeholder="请输入系统ID或名称"/>
</div>
<div class="col-lg-10 col-md-10">
<button class="btn btn-default search-btn" onclick="search();">查询</button>
                    <button class="btn btn-default search-btn" onclick="toPortraitAdvancedQuery();">高级查询</button>
<button class="btn btn-default search-btn" onclick="search();">我关注的系统</button>
                    <button class="btn btn-default search-btn" onclick="search();">总体评估的系统</button>
<button class="btn btn-default search-btn" onclick="search();">增强的系统</button>
</div>
          </div>
        </div>
    </div>
<div class="col-sm-12 col-md-12">
            <div class="row" id="chart-flot">
                <div class="col-sm-12">
                    <table id="sysTable"></table>
                </div>
            </div>
        </div>
    
</div>
<script type="text/javascript">


 function destroyTable(ele){
//动态加载表格之前,先销毁表格
       $(ele).bootstrapTable('destroy');
   }
   
function initAlarmTable(sysIdName){
        destroyTable('#sysTable');
        //加载表格
        $('#sysTable').bootstrapTable({
            url: '${ctx}/portrait/systemCfg/findSysList',
            method: 'post',
            contentType: 'application/x-www-form-urlencoded', //请求数据内容格式 默认是 application/json 自己根据格式自行服务端处理
            classes: 'table table-hover', //表格的类名称。默认情况下,表格是有边框的,你可以添加 'table-no-bordered' 来删除表格的边框样式。
            dataField: 'result', //服务端返回数据键值 就是说记录放的键值是result,分页时使用总记录数的键值为total
            pagination: true, //是否分页
            pageSize: 10, //每页的记录行数(*)
            pageList: [5, 10, 15], //可供选择的每页的行数(*)
            sidePagination: 'server', //分页方式:client客户端分页,server服务端分页(*)
            cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
            locale: "zh-CN",
            columns: [{
                title: '系统ID',
                field: 'sysId',
                align: 'center'
            }, {
                title: '系统名称',
                field: 'sysName',
                align: 'center',
                formatter: function(value, row){
           var html = '';
           html += '<a href="${ctx}/portrait/tagResult/portraitData1?sysId=' + row.sysId + '">'+value+'</a>';
           return html;
       }
            },{
                title: '健康评分',
                field: 'showFont',
                align: 'center'
            },{
                title: '维护分类',
                field: 'tagGroupId',
                align: 'center'
            },{
                title: '操作',
                field: '',
                align: 'center',
                formatter: function (value, row, index) {
                    var html = '';
                    html += '<button class="btn btn-default" onclick="toPortraitDataDetail();">详情</button>';
                   return html;
                }
            }],
            /*请求服务器数据时,你可以通过重写参数的方式添加一些额外的参数,例如 toolbar 中的参数 如果 queryParamsType = 'limit' ,
            返回参数必须包含limit, offset, search, sort, order 否则, 需要包含: 
            pageSize, pageNumber, searchText, sortName, sortOrder.返回false将会终止请求*/
            queryParams: function(params){
                var param = {
                    from: Math.ceil(params.offset / params.limit),
                    size: params.limit,
                    sysIdName:sysIdName
                };
                return param;
            },
            /*加载服务器数据之前的处理程序,可以用来格式化数据。参数:res为从服务器请求到的数据。*/
            responseHandler: function(res){
                return res;
            }
        });
    }
</script>
</body>
</html>

模态框--传值

阅读数 1581

Bootstrap的使用

阅读数 56

没有更多推荐了,返回首页