2018-07-20 10:36:54 qq_21306669 阅读数 8302

由于初识bootstrap非常感谢这篇https://blog.csdn.net/u011498933/article/details/70228357博文给我的提示.第一篇博文,写的不好希望理解.

需求: 

将已批准行的数据改变背景颜色区分未批准行

js代码:

 //初始化表格
    function initTable(id) {
        //先销毁表格
        $('#cusTable').bootstrapTable('destroy');
        //初始化表格,动态从服务器加载数据
        $("#cusTable").bootstrapTable({
            method: "get",  //使用get请求到服务器获取数据
            contentType: "application/x-www-form-urlencoded",
            url: "<%=basePath%>/xxxx/getxxxxList.do?",
            striped: true,  //表格显示条纹
            pagination: true, //启动分页
            toolbar: "#toolbar",
            showRefresh: true,
            pageSize: 10,  //每页显示的记录数
            pageNumber: 1, //当前第几页
            exportDataType: "all",
            clickToSelect: true,
            //search:true,
            columns: [{
                field: 'fid',
                title: '<input class="checkbox_" type="checkbox"/>',
                align: 'center',
                valign: 'middle',
                formatter: function (value, row, index) {
                    var html = "<input class='checkbox" + index + "' type='checkbox' name='checkbox' value='" + row.fid + "," + row.isshouqun + "'/>";
                    return html;
                }
            },
                {
                    field: 'reportcode',
                    title: '编号',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    field: 'ce_name',
                    title: '单位',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    field: 'unitman',
                    title: '送检人',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    field: 'sjtime',
                    title: '日期',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        if (value == null || value == '' || value == 'null') {
                            return "-";
                        } else {
                            var sj = parseInt(value.toString().replace(/\D/igm, ""));
                            var rq = new Date(sj);
                            return rq.toLocaleDateString();
                        }
                    }
                },
                
                {
                    field: 'isshouqun',
                    title: '状态',
                    align: 'center',
                    valign: 'middle',
                    formatter: function operateFormatter(value, row, index) {
                        if (value == 2 || value == "2") {
                            return "<span style='color:green;'>已批准</span>";
                        } else {
                            return "<span style='color:red;'>未批准</span>";
                        }
                    }
                },
           
            ],
            sidePagination: "server", //表示服务端请求
//设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
//设置为limit可以获取limit, offset, search, sort, order
            queryParamsType: "limit",
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    limit: params.limit,
                    offset: params.offset,
                    unId: id,
                };
                return param;
            },
            onLoadSuccess: function () {  //加载成功时执行
                getTdValue();
            },
            onLoadError: function () {  //加载失败时执行

            }
        });
    }

    //将已批准的数据改变背景颜色
    function getTdValue(){
        var tableId = document.getElementById("cusTable");
          
        for(var i = 1;i < tableId.rows.length;i++) {
                
            if(tableId.rows[i].cells[x].innerHTML.indexOf("已批准") != -1 ){
                tableId.rows[i].setAttribute("style","background: #bfbfff;");
                
            }
        }
    }
        /**
     * 初始化
     */
    $(document).ready(function () {
        //调用函数,初始化表格
        initTable();
        $(".modal-content").draggable({cursor: "move"});//为模态对话框添加拖拽
        $("button[title='刷新']").hide();
        $(".close").click(function () {
            resetForm();
        })

    });
</script>

PS: 调用getTdValue();函数的时候,不能在初始化表格initTable();之后调用.而应在 onLoadSuccess 加载成功时调用.

2017-12-20 10:26:09 actorWen 阅读数 154

1.首先介绍一下CSS代码的显示


(1)<code>元素显示单行内联代码。设置背景颜色和内部文本颜色。


(2)<pre>元素新生多行代码块。显示大块的代码段,并保持原有格式不变。


(3)<kbd>元素显示用户输入代码。



2.表格


在表格组件里,Bootstrap提供了一种基础的table样式,4种附加样式(table-sstriped、


table-bordered、table-hover、table-condensed)以及一个支持响应式布局的table-responsive


容器样式。注意:每种附加样式都是在table样式的基础上联合应用才生效的


(1).基础样式:table


只要在table元素上应用table样式就可以制作出漂亮的表格。


可以参照图2和图3来进行对比:



图2(未应用table样式)



图3(应用table样式)


图3所对应的代码3为:

代码3:

<table class="table"> /*图2和图3的区别在于table样式的应用与否*/
<tr><td>#</td><td>图书名称</td><td>出版社</td><td>作译者</td></tr>
<tr>
<td>1</td>
<td>javascript编程精解</td>
<td>机械工业出版社</td>
<td>汤姆大叔(译)</td>
</tr>
<tr>
<td>2</td>
<td>javascript设计模式</td>
<td>人民邮电出版社</td>
<td>汤姆大叔(译)</td>
</tr>
<tr>
<td>3</td>
<td>javascript启示录</td>
<td>人民邮电出版社</td>
<td>汤姆大叔(译)</td>
</tr>
<tr>
<td>4</td>
<td>深入理解Bootstrap</td>
<td>机械工业出版社</td>
<td>汤姆大叔(译)</td>
</tr>
</table>


table样式的主要作用有3个

增加单元格的内边距;

在thead的底部设置一条2像素的粗线;

在每行记录的顶部都有一条1px的细线。


(2).带背景条纹的表格:


在现有的table样式的基础上再应用一个table-striped的样式,就设置了隔行加背景色。


例如:在代码3的基础上添加该样式就可以得到图4及其对应的代码4:



图4

代码4:

<table class="table table-striped">
<tr><td>#</td><td>图书名称</td><td>出版社</td><td>作译者</td></tr>
<tr>
<td>1</td>
<td>javascript编程精解</td>
<td>机械工业出版社</td>
<td>汤姆大叔(译)</td>
</tr>
<tr>
<td>2</td>
<td>javascript设计模式</td>
<td>人民邮电出版社</td>
<td>汤姆大叔(译)</td>
</tr>
<tr>
<td>3</td>
<td>javascript启示录</td>
<td>人民邮电出版社</td>
<td>汤姆大叔(译)</td>
</tr>
<tr>
<td>4</td>
<td>深入理解Bootstrap</td>
<td>机械工业出版社</td>
<td>汤姆大叔(译)</td>
</tr>
</table>


(3).带边框的表格


在table样式的基础上添加样式table-bordered,就可以实现为表格添加边框的效果;


例5:为表格添加边框效果



图5

代码5:相对于代码4只改了一处,

将代码4中第一行:<table class="table table-striped">

改为代码5的第一行:<table class="table table-bordered">


(4).鼠标悬停高亮表格


table-hover样式:当鼠标移动到其上方时会变换颜色。用法参见代码4和代码5.


(5).紧凑型表格


紧凑型表格指的是表格的显示比普通表格稍微紧凑一些,即是减小了单元格的内边距。


样式为:table-condensed


具体用法可以参见代码4和代码5。




3.行级元素样式


Bootstrap为表格的tr元素提供了5中额外的样式,用于控制tr的背景颜色。


tr的行级元素样式:

(1).active:表示当前活动的信息;

(2).success:表示成功或者正确的行为;

(3).info:表示中立的信息或行为;

(4).warning:表示警告,需要特别注意;

(5).danger:表示危险或者可能是错误的行为;


可以对代码3的5行分别设置行的颜色,最终的显示效果如图6:



图6



4.响应式表格


Bootstrap为表格提供了一个响应式设计的容器(table-responsive),将table-responsive样式包装在


table样式外部即可创建响应式表格,其会在小屏幕设备(<768px)上滚动;当屏幕大于768px时,水


平滚动条消失。具体可见下方的图7和图8:



图7(当屏幕宽度小于768px时)



图8(当屏幕宽度大于768px时)




2018-08-24 16:36:26 cauchy6317 阅读数 27164

 需求:在bootstrap-table的表格中,点击某行改变该行的背景颜色和其他的属性。

官方文档

 文档中分了option事件和jQuery事件,在这里我先用option事件完成需求,然后再用jQuery事件实现一次。之所以还要用jQuery事件实现一下是因为jQuery实现的过程有个注意点,在此记录一下。

第一部分:option事件

$("#companyTable").bootstrapTable({
                url:'/getRow/getData',  //获取表格数据
                //使用post传参,去掉后无法成功
                contentType:'application/x-www-form-urlencoded; charset=UTF-8',
                method: "get",
                toolbar:"#companyToolbar",
                cache: false,            //禁用ajax缓存
                striped: true,           //表格显示条纹
                pagination: true,        //在底部显示分页组件
                pageList: [10, 20],       //设置页面可以显示的数据条数
                pageSize: 10,             // 页面数据条数
                pageNumber: 1,            // 首页页码
                sidePagination: 'server', // 设置为服务器端分页
                showColumns:true,        //是否显示内容列下拉框
                showToggle:false,         //切换详细视图和列表视图
                singleSelect:true,        //单选checkbox
                onClickRow:function (row,$element) {
                    $('.info').removeClass('info');
                    $($element).addClass('info');
                },
                queryParamsType: '',
                queryParams:function (params){   //请求服务器数据时,添加额外参数
                    return {
                        pageSize:params.pageSize, // 每页要显示的数据条数
                        pageNum:params.pageNumber,    // 页码
                        companyName:$("#companyName").val()
                    }
                },
                idField:'companyCode',             //指定主键列
                columns:[{
                    field:'ofplate',  //返回json中的name
                    title:'所属板块',   //表格表头显示文字
                    halign:'center', //表头居中
                    valign: 'middle' // 上下居中
                },{
                    field:'companyName',  //返回json中的name
                    title:'企业名称',   //表格表头显示文字
                    halign:'center',
                    //align:'center',   //左右居中
                    valign: 'middle' // 上下居中
                }
                ]
            });

onClickRow:function (row,$element) {
                    $('.info').removeClass('info');//移除class
                    $($element).addClass('info');//添加class
                }

实现效果:

.info是bootstrap自带的class。下面是源码,可以修改。

如果你想自定义点击的后class。只需要自己定义一个.changColor

<style>
        .changeColor{
            background-color: #31b0d5  !important;
            color: white;
        }
</style>

.changeColor的实现效果

第二部分:jQuery事件

这是我刚开始的写法,一直不能实现效果。后来debugger发现用jQuery方法时row和onClickRow的row不同,$element也不同。后来我百度到了解决方法。

$('#companyTable').on('click-row.bs.table', function (e,row,$element) {
                $('.changeColor').removeClass('changeColor');
                $($element).addClass('changeColor');

            });

function(e,row,$element){

}

官网中并没有说需要加上e,这里面的e有什么作用,我还没弄太清楚。

2019-08-03:更

发现有些网站抄袭我的博客,且不注明出处和转载。我将保留追究其法律责任!!!

2016-01-18 23:00:18 luohuaxinyue 阅读数 5774

1.关于低版本的IE浏览器兼容性问题的解决:

<!--[if lt IE 9]>            //注意:这部分不是注释
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
上面的代码注释后显示是这样的:

<!--&lt;!&ndash;[if lt IE 9]>-->
<!--<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>-->
<!--<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>-->
<!--<![endif]&ndash;&gt;-->
注意红色部分的内容

2.栅格系统:

1)Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

2)行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。

3)内容必须放在列(column)里面,而列放在行(row)里面。

4)如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”则会掉下来到下一行,即作为一个整体另起一行排列。

栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

  超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C
.container 最大宽度 None (自动) 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列(column)数 12
最大列(column)宽 自动 ~62px ~81px ~97px
槽(gutter)宽 30px (每列左右均有 15px)
可嵌套
偏移(Offsets)
列排序
示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>栅格系统</title>
    <link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-3.3.5-dist/js/jquery-1.11.3.min.js"></script>
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
      <div class="row" style="margin:50px auto;">
          <div class="col-lg-4" style="height: 500px;border: #97ff9b solid 1px;padding: 10px;">
              《飞鸟集[1]》是泰戈尔的代表作之一,具有很大的影响,在世界各地被译为多种中文字版本,是最早被译为
              中文版本的泰戈尔[2]作品之一,包括了三百余首清丽的小诗。这些诗歌描写小草,流萤,落叶,飞鸟,山水,河流。简短的诗句如
              同阳光撒落在挂着水珠的树叶上,又如天边几朵白云在倘翔,一切都是那样地清新,亮丽,可是其中韵味却很厚实,耐人寻味。
          </div>
          <div class="col-lg-6" style="height: 500px;border: #97ff9b solid 1px; padding: 10px">
              《飞鸟集[1]》是泰戈尔的代表作之一,具有很大的影响,在世界各地被译为多种中文字版本,是最早被译为
              中文版本的泰戈尔[2]作品之一,包括了三百余首清丽的小诗。这些诗歌描写小草,流萤,落叶,飞鸟,山水,河流。简短的诗句如
              同阳光撒落在挂着水珠的树叶上,又如天边几朵白云在倘翔,一切都是那样地清新,亮丽,可是其中韵味却很厚实,耐人寻味。
          </div>
      </div>
  </div>
</body>
</html>
运行效果:


3.列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。

示例代码:

<body>
  <div class="container">
      <div class="row" style="margin:50px auto;">
          <div class="col-lg-4" style="height: 500px;border: #97ff9b solid 1px;padding: 10px;">
              《飞鸟集[1]》是泰戈尔的代表作之一,具有很大的影响,在世界各地被译为多种中文字版本,是最早被译为
              中文版本的泰戈尔[2]作品之一,包括了三百余首清丽的小诗。这些诗歌描写小草,流萤,落叶,飞鸟,山水,河流。简短的诗句如
              同阳光撒落在挂着水珠的树叶上,又如天边几朵白云在倘翔,一切都是那样地清新,亮丽,可是其中韵味却很厚实,耐人寻味。
          </div>
          <div class="col-lg-6 col-md-offset-2" style="height: 500px;border: #97ff9b solid 1px; padding: 10px">
              娜塔丽·波特曼,本名娜塔莉·赫许勒(Natalie Hershlag,198169-),出生于 以色列耶路撒冷,美国女演员。13岁时,她
              出演 《这个杀手不太冷》的女主角,开始了一边读书一边拍戏的生涯。1997年,波特曼以《管到太平洋》片中安·奥格斯特一角获得
              金球奖最佳女配角的提名。1999年,成年后的她凭借 《星球大战》三部曲 帕德梅·艾米达拉女王一角...
          </div>
      </div>
  </div>
</body>
运行效果:



4.所有设置了.form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 

但是在

<input type="file">

中就没有必要添加了,添加之后效果反而会不好。因为文件按钮没必要添加一个100%的外框。

将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
5.内联单选和多选框
通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框(checkbox)或单选框(radio)控件上,可以使这些控件排列在一行。
示例代码:
(来自bootstrap官网)

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
注意:input标记放在label标签里面,id和value属性可以不写。 type="checkbox"

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
注意:input标记放在label标签里面,class="radio-inline"放在label标签里面。在input标签中
id和value属性可以不写,name属性的值保持一致,type="radio"。
<label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2</label><label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3</label>

6.Button的默认样式以及大小的设定
1)为 <a>、<button> 或 <input> 元素添加按钮类(button class)即可使用 Bootstrap 提供的样式。
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
2)Button 的预定义样式:可以通过class="btn btn-default"、class="btn btn-primary"等来设置button的背景色
3)使用 .btn-lg.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

7.Label标签可以获得光标

8.水平排列的表单:

过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。

如下代码:

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">   
//这里的input标签要放在div里面,在div里面才可以添加类class="col-sm-10",不能直接在input标签里面添加
    </div>
  </div>
</form>

9..control-label  :默认情况下文字采用右对齐

水平式(参考链接:http://bootstrap.kinghack.com/base-css.html)

右对齐的标签和左浮动, 使它们在同一行一一对照. 需要从默认的表格中改动一些的标记:

  • 在表格添加 .form-horizontal
  • 把标签和控件包含在 .control-group
  • 在标签添加 .control-label
  • 为任何关联的控件添加 .controls 来确保位置正确
效果及代码:


10.列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。


11.完整表单代码示例及运行效果:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Form练习</title>
    <link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-3.3.5-dist/js/jquery-1.11.3.min.js"></script>
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container" style="margin-top: 50px">
    <form class="form-horizontal">          <!--class="form-horizontal"-->
        <div class="form-group">
            <label for="username" class="col-lg-2 control-label ">用户名:</label>            <!--control-label-->
            <div class="col-lg-10">
                <input type="text" id="username" class="form-control" placeholder="请输入用户名"> <!--form-control-->
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="col-lg-2 control-label ">密码:</label>
            <div class="col-lg-10">
                <input type="password" class="form-control" id="password" placeholder="请输入密码">
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-2 control-label">上传图片:</label>
            <div class="col-lg-10">
                <input type="file">
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-2 control-label">兴趣爱好:</label>
            <div class="col-lg-10">
                <label class="checkbox-inline"><input type="checkbox">唱歌</label><!--<label class="checkbox-inline">-->
                <label class="checkbox-inline"><input type="checkbox">运动</label>
                <label class="checkbox-inline"><input type="checkbox">看书</label>
                <label class="checkbox-inline"><input type="checkbox">下棋</label>
                <label class="checkbox-inline"><input type="checkbox">购物</label>
                <label class="checkbox-inline"><input type="checkbox">电影</label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-2 control-label">学历:</label>
            <div class="col-lg-10">
                <label class="radio-inline"><input type="radio" name="radio">中学</label> <!--radio-inline、还没解决只能选一个的问题-->
                <label class="radio-inline"><input type="radio" name="radio">大专</label>
                <label class="radio-inline"><input type="radio" name="radio">本科</label>
                <label class="radio-inline"><input type="radio" name="radio">硕士</label>
                <label class="radio-inline"><input type="radio" name="radio">博士</label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-2 control-label">个人简介:</label>
            <div class="col-lg-10">
                <textarea placeholder="请输入个人简介" rows="8" class="form-control"></textarea>
                <!--<input type="text" placeholder="请输入个人简介">-->
            </div>
        </div>
        <div class="col-lg-10 col-lg-offset-2">
            <button class="btn btn-success btn-lg">提交</button>
        </div>

    </form>
</div>
</body>
</html>

运行效果:


2013-01-30 14:26:24 iteye_3319 阅读数 102


  例:

     查询物品,如果物品是退回状态显示黄色、调整显示红色。

      效果:


        
 

   代码   :

       

       

       

boostrap学习笔记2

阅读数 269

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