初次使用bootstrap记录心得

最新推荐文章于 2024-06-17 10:29:50 发布

小板凳-BGM

最新推荐文章于 2024-06-17 10:29:50 发布

阅读量706

点赞数

分类专栏：笔记文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_34279442/article/details/89084423

版权

笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

因为项目需要，原本项目用的前端框架为easyui，现重构为bootstrap,主要是记录一下使用方法.
先在一个界面引用bootsrap相关js文件，以便测试
在这里插入图片描述引用相关标签（已有）
引用的相关js (已有)
在单独的页面上引用bootstrap 相关js/css（注意：bootstrap是分组件的，需要引用不同的js组件来实现不同的功能）

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/tag.inc.jsp"%>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
<title>My JSP 'weightWay.jsp' starting page</title>
<link rel="stylesheet" href="<c:url value='/mesui/bootstrap/css/bootstrap.min.css'/>" type="text/css"></script>
<link rel="stylesheet" href="<c:url value='/mesui/bootstrap/css/bootstrap-switch.min.css'/>" type="text/css"></script>
<script type="text/javascript" src="<c:url value='/mesui/bootstrap/js/bootstrap.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/mesui/bootstrap/js/bootstrap-table.js'/>"></script>
<script type="text/javascript" src="<c:url value='/mesui/bootstrap/js/bootstrap-switch.min.js'/>"></script>
<script type="text/javascript">
    	$(function(){
    		searchdata();
    		/* $('#my-checkbox').bootstrapSwitch('state',true);
    		$('[name="my-checkbox"]').bootstrapSwitch({
						onText:"开启",
						offText:"关闭",
						onColor:"success",
						offColor:"danger",
						size:"small",
						onInit:function(element,event,state){//控件初始化时触发  
				            console.log('onInit:');  
				            console.log(this);//开关控件的jQuery对象  
				            console.log(element);//checkbox的DOM elememt元素  
				            console.log(event);//jQuery事件  
				            console.log(state);//开关的初始化选中状态  
        				},
						onSwitchChange:function(event,state){
							var step = this.value;
							if(state==true){
								console.log('已打开'+step);
							}else{
								console.log('已关闭'+step);
							}
						}
					}); */
				//	$('[name="my-checkbox1"]').bootstrapSwitch();  
				//	$('[name="my-checkbox2"]').bootstrapSwitch();  
    	});
    	function searchdata(){
    		$('#weightWay').bootstrapTable({
    			method: 'post',
        		editable:true,//开启编辑模式  
        		clickToSelect: true,
        		cache : false,
    			url:"<c:url value='/qm/weightWay.sp?method=list'/>",
    			columns:[
    				{field:'step_number',title:'工序',align:'center',formatter:function(val,row,index){
    					var a = row.step_number;
    					if(a=='20'){
    						return '挤出';
    					}
    					if(a=='30'){
    						return '辐照';
    					}
    					if(a=='40'){
    						return '扩张';
    					}
    					if(a=='50'){
    						return '上盘';
    					}
    					if(a=='60'){
    						return '切管';
    					}
    					if(a=='90'){
    						return '封帽';
    					}
    				}},
    				{field:'is_feed',title:'投料称重功能',align:'center',formatter: forIsFeed},//
    				{field:'is_remove',title:'卸盘/筐称重功能',align:'center',formatter: forIsRemove},//
    				{field:'is_kg',title:'单位',align:'center'},
    			],
    			onLoadSuccess:function(){
    					//$('#my-checkbox1').bootstrapSwitch('state',true);
						$('[name="my-checkbox1"]').bootstrapSwitch({
						onText:"开启",
						offText:"关闭",
						onColor:"success",
						offColor:"danger",
						size:"small",
						onInit:function(element,event,state){//控件初始化时触发 
							console.log('onInit:');  
				            console.log(this);//开关控件的jQuery对象  
				            console.log(element);//checkbox的DOM elememt元素  
				            console.log(event);//jQuery事件  
				            console.log(state);//开关的初始化选中状态  
						},
						onSwitchChange:function(event,state){
							var step = this.value;
							if(state==true){
								console.log('已打开'+step);
							}else{
								console.log('已关闭'+step);
							}
						}
					});
					$('[name="my-checkbox2"]').bootstrapSwitch({
						onText:"开启",
						offText:"关闭",
						onColor:"success",
						offColor:"danger",
						size:"small",
						onInit:function(element,event,state){//控件初始化时触发 
							console.log('onInit:');  
				            console.log(this);//开关控件的jQuery对象  
				            console.log(element);//checkbox的DOM elememt元素  
				            console.log(event);//jQuery事件  
				            console.log(state);//开关的初始化选中状态  
						},
						onSwitchChange:function(event,state){
							var step = this.value;
							if(state==true){
								console.log('已打开'+step);
							}else{
								console.log('已关闭'+step);
							}
						}
					})
				}, 
    			queryParams:{
    			},
    		})
    	}
    	function forIsFeed(val,row,index){
    		var a=row.key;
    		if(0==val){
    			return '-';
    		}else{
    			if(1==val){
    				$('[name="my-checkboxs1"]').bootstrapSwitch('state',true);
    			}
    			if(2==val){
    				$('[name="my-checkboxs1"]').bootstrapSwitch('state',false);
    			}
    			return "<input value='"+a+"' type='checkbox' name='my-checkbox1'/>";
    		}
    	}
    	
    	function forIsRemove(val,row,index){
    		var a=row.key;
    		if(0==val){
    			return '-';
    		} else{
    			if(1==val){
    				$('#my-checkboxs2').bootstrapSwitch('state',true);
    			}
    			if(2==val){
    				$('#my-checkboxs2').bootstrapSwitch('state',false);
    			}
    			return "<input value='"+a+"' type='checkbox' name='my-checkbox2' />";
    		}
    	}
    		
    </script>

  </head>
  	
  	<!-- <input type='checkbox' name='my-checkbox' id='my-checkbox'> -->
  <body>
    	<div>
    		<table id="weightWay" 
    		class="table table-striped table-bordered table-hover table-condensed" style="width: 60%;"> </table>
    	</div>
  </body>
</html>

测试用的页面

小板凳-BGM

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
初次使用bootstrap记录心得

因为项目需要，原本项目用的前端框架为easyui，现重构为bootstrap,主要是记录一下使用方法.先在一个界面引用bootsrap相关js文件，以便测试引用相关标签（已有）引用的相关js (已有)在单独的页面上引用bootstrap 相关js/css（注意：bootstrap是分组件的，需要引用不同的js组件来实现不同的功能）<%@ page contentType="text...
复制链接

扫一扫