2019-03-28 17:53:00 weixin_30716725 阅读数 103

1、引入相关的css和js

<link type="text/css" href="/components/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="/components/bootstrap-table/1.11.1/dist/bootstrap-table.min.css" rel="stylesheet" /> 
<script type="text/javascript" src="/components/bootstrap-table/1.11.1/dist/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/components/bootstrap/3.3.7/css/bootstrap.min.js"></script>
<script type="text/javascript" src="/components/bootstrap-table/1.11.1/dist/bootstrap-table.min.js"></script>
<script type="text/javascript" src="components/bootstrap-table/1.11.1/dist/bootstrap-table-zh-CN.js"></script>

2、写table表格并加入数据

<table id="tablewrap1" data-toggle="table" data-locale="zh-CN"
                   data-ajax="ajaxRequest"  data-icon-size="sm"  data-single-select="false"
                   data-click-to-select="true" data-side-pagination="server"
                   data-striped="true" data-pagination="true"
                   data-maintain-selected="true" data-detail-view="true"
                   class="fline-show-when-ready table" >
                <thead>
                <tr>
                    <!--<th data-field="state1" data-checkbox="true"></th>-->
                    <th data-field="field">名称</th>
                    <th data-field="fieldName">中文名称</th>
                    <th data-field="identifier">标识符</th>
                    <th data-field="affiliatedName">单位</th>
                    <th data-field="typeName">分类</th>
                    <th data-field="state1" data-checkbox="true"></th>
                </tr>
                </thead>
            </table>
data-detail-view="true" 显示前面的+号
3、js初始化
function ajaxRequest(params) {
    var pageSize = params.data.limit;
    var pageNum = params.data.offset / pageSize + 1;
    index = params.data.offset + 1;
    var sort = params.data.sort ? params.data.sort : "id";
    var order = params.data.order ? params.data.order : "desc";
    var datas;
    var dataElements;
    var affiliatedVal=$("#searchOrg option:selected").val()
    var dataStr ='&pageNum=' + pageNum + '&pageSize=' + pageSize;
    var count;
    $.ajax({
        type : 'get',
        url : 'url地址',
        dataType : 'json',
        async : false,
        data : {'pageNum':pageNum,
            'pageSize':pageSize,
        },
        success : function(data) {
            var count = data.count, dataElements = data.data;
            params.success({
                total : count,
                rows : dataElements
            });

        }
    });
}

4、加入子表格

$("#tablewrap1").on('expand-row.bs.table', function (e, index, row, $detail) {
    InitSubTable(index, row, $detail);
})
/*
expand-row.bs.table 里面的三个主要的参数
index:父表当前行的行索引。
row:父表当前行的Json数据对象。
$detail:当前行下面创建的新行里面的td对象。
第三个参数尤其重要,因为生成的子表的table在装载在$detail对象里面的。bootstrap table为我们生成了$detail这个对象,然后我们只需要往它里面填充我们想要的table即可。
*/
InitSubTable = function (index, row, $detail) {
    var cur_table = $detail.html('<table class="subTable"></table>').find("table");
    $(cur_table).bootstrapTable({
        url: 'url地址',
        method: 'get',
        clickToSelect: true,
        sidePagination : 'server',
        queryParams: function (params) { //url携带的参数
            var temp = {
                "dataElements": row.identifier,
                
            }
            return temp
        },
        columns: [
            {
                field: 'field',
                title: '名称'
            },
            {
                field: 'fieldName',
                title: '中文名称'
            },
            {
                field: 'dataElementID',
                title: '标识符'
            },
            {
                field: 'identifier',
                title: '部门'
            },
            {
                field: 'typeName',
                title: '分类'
            },
            {
                field: 'dataFormat',
                title: '数据格式'
            },
            {
                field: 'state',
                title: '同步',
                checkbox: true
            }],
        responseHandler: function(res) {  // url返回的数据,修改为rows和total的格式,不能为其他格式
            var data = '';
                data = {
                    rows: res.data,
                    total: res.data.length
            }
            return data;
        }
    });
};

5、最终的效果图

6、注:

  3和4是两种不同的方式写表格,都可以达到目的

  如果显示一直在加载中或者有数据但是没有加载出来, 则可能是0sidePagination分页方式没有设置

 

转载于:https://www.cnblogs.com/sllzhj/p/10616662.html

2018-10-11 12:10:19 wepe12 阅读数 43734

前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的。有园友在评论中提到了父子表的用法,今天就结合Bootstrap table的父子表和行列调序的用法再来介绍下它稍微高级点的用法。

bootstrap table系列:

一、效果展示

今天稍微改变下方式,先来看看实现效果,后面再介绍代码实现及注意事项。来,效果图来一发:

1、父子表效果图

2、行调序

调序前

拖动行调序到第一行

3、列调序

调序前

拖动列标题调序

调序后

 

二、父子表代码详解

上章我们介绍Bootstrap table基础用法的时候介绍过,初始化表格的时候有一个属性“detailView”,将它设置为true,在每行的前面即可看到一个“+”形状的图标。点击这个图标即触发加载子表格的事件。大概的原理就是如此,来看看代码,其实也很简单。

1、初始化表格,注册行展开事件

复制代码

        $("#tb_powerset").bootstrapTable({
                url: '/api/MenuApi/GetParentMenu',
                method: 'get',
                detailView: true,//父子表
                //sidePagination: "server",
                pageSize: 10,
                pageList: [10, 25],
                columns: [{
                    field: 'MENU_NAME',
                    title: '菜单名称'
                }, {
                    field: 'MENU_URL',
                    title: '菜单URL'
                }, {
                    field: 'PARENT_ID',
                    title: '父级菜单'
                }, {
                    field: 'MENU_LEVEL',
                    title: '菜单级别'
                }, ],
                //注册加载子表的事件。注意下这里的三个参数!
                onExpandRow: function (index, row, $detail) {
                    oInit.InitSubTable(index, row, $detail);
                }
            });

复制代码

还是来看看子表加载事件onExpandRow对应方法function (index, row, $detail)的三个参数,

index:父表当前行的行索引。

row:父表当前行的Json数据对象。

$detail:当前行下面创建的新行里面的td对象。

第三个参数尤其重要,因为生成的子表的table在装载在$detail对象里面的。bootstrap table为我们生成了$detail这个对象,然后我们只需要往它里面填充我们想要的table即可。

2、我们来看oInit.InitSubTable()这个方法

复制代码

    //初始化子表格(无线循环)
    oInit.InitSubTable = function (index, row, $detail) {
        var parentid = row.MENU_ID;
        var cur_table = $detail.html('<table></table>').find('table');
        $(cur_table).bootstrapTable({
            url: '/api/MenuApi/GetChildrenMenu',
            method: 'get',
            queryParams: { strParentID: parentid },
            ajaxOptions: { strParentID: parentid },
            clickToSelect: true,
            detailView: true,//父子表
            uniqueId: "MENU_ID",
            pageSize: 10,
            pageList: [10, 25],
            columns: [{
                checkbox: true
            }, {
                field: 'MENU_NAME',
                title: '菜单名称'
            }, {
                field: 'MENU_URL',
                title: '菜单URL'
            }, {
                field: 'PARENT_ID',
                title: '父级菜单'
            }, {
                field: 'MENU_LEVEL',
                title: '菜单级别'
            }, ],
            //无线循环取子表,直到子表里面没有记录
            onExpandRow: function (index, row, $Subdetail) {
                oInit.InitSubTable(index, row, $Subdetail);
            }
        });
    };

复制代码

由此可以看出生成子表的原理就是创建一个table对象cur_table,然后再注册这个对象的表格初始化即可。是不是很简单~~

三、行调序代码详解

行调序的代码就更简单了,来看看。

1、需要额外引用两个js文件

<script src="~/Content/jquery-ui-1.11.4.custom/external/jquery.tablednd.js"></script>
<script src="~/Content/bootstrap-table/extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script>

2、在cshtml页面定义表格时,添加两个属性

<table id="tb_order" data-use-row-attr-func="true" data-reorderable-rows="true"></table>

然后js表格初始化的时候不需要做任何修改,加载出来的表格即可实现行调序的功能。

四、列调序代码详解

和行调序类似。列调序的使用如下:

1、额外引用几个js和css

复制代码

<script src="~/Content/bootstrap-table/extensions/reorder-columns/bootstrap-table-reorder-columns.js"></script>
<link rel="stylesheet" href="../assets/examples.css">
<link rel="stylesheet" href="https://rawgit.com/akottr/dragtable/master/dragtable.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://rawgit.com/akottr/dragtable/master/jquery.dragtable.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

复制代码

2、在cshtml页面定义表格时,添加一个属性

<table id="tb_departments" data-reorderable-columns="true"></table>

其他地方不用做任何修改。加载出来的表格即可实现列调序。有没有很简单。

五、控件过滤

本来这篇准备结束的,突然想起上章里面有一个搜索的功能,好像是服务端分页的时候搜索功能没法使用,于是想起之前再CS里面做过一个类似每个列过滤的功能,博主好奇心又起来了,bootstrap table是否也有这种表格每列过滤的功能,于是查看文档。结果不负所望,还真有~~我们来看看。

1、效果图展示

2、代码示例

(1)引入额外js

<script src="~/Content/bootstrap-table/extensions/filter-control/bootstrap-table-filter-control.js"></script>

(2)定义表格属性及表头属性

复制代码

   <table id="tb_roles" data-filter-control="true">
        <thead>
            <tr>
                <th data-field="ROLE_NAME" data-filter-control="select">角色名称</th>
                <th data-field="DESCRIPTION" data-filter-control="input">角色描述</th>
                <th data-field="ROLE_DEFAULTURL" data-filter-control="input">角色默认页面</th>
            </tr>
        </thead>
    </table>

复制代码

因为这里定义了表头的属性,所以,js初始化的时候就不用定义列了。

(3)js初始化

复制代码

 $('#tb_roles').bootstrapTable({
        url: '/Role/GetRole',
        method: 'get',
        toolbar: '#toolbar',
        striped: true,
        cache: false,
        striped: true,
        pagination: true,
        sortable: true,
        queryParams: function (param) {
            return param;
        },
        queryParamsType: "limit",
        detailView: false,//父子表
        sidePagination: "server",
        pageSize: 10,
        pageList: [10, 25, 50, 100],
        search: true,
        showColumns: true,
        showRefresh: true,
        minimumCountColumns: 2,
        clickToSelect: true,
        
    });

复制代码

最开始,博主以为这种搜索只能用户客户端分页的情况,可是经过调试发现并非如此,原来搜索的条件都能通过json传递到服务端。我们来看调试的过程

后台接收参数,并反序列化

这样我们就能将查询的条件很好地传递到后台。很好很强大啊。这样就免去了扩展表格搜索功能的烦恼~~

 

六、总结

以上就是bootstrap table的一些扩展应用。可能未不全面,还有一些高级用法也没有介绍,比如行、列合并,行列冻结等等。但博主相信只要有文档,使用起来应该问题不大。源码还需整理,待整理好再发上来。园友们暂且先看看!!

2014-03-17 16:28:09 iteye_9403 阅读数 806
profile主要用在项目多环境运行的情况下,比如开发环境、测试环境、线上生产环境。
我负责的项目某个数据管理后台涉及到包含测试环境在内的12个不同的运行环境,所以每次发布都很蛋疼很纠结,配置改过来改过去,到最后有些环境都忘了怎么配的。
下面以这个项目为例介绍。
准备条件:spring3.x、Maven 2

这里是整合spring的profile和Maven的profile功能

[b][size=large]spring的profile配置[/size][/b]

首先是spring的配置数据源和属性文件

<beans profile="xmj_old">
<bean id="dataSource"
class="org.springframework.jdbc.datasource.DriverManagerDataSource">
<property name="driverClassName" value="com.mysql.jdbc.Driver" />
<property name="url"
value="jdbc:mysql://127.0.0.1:3306/db1?characterEncoding=utf8" />
<property name="password" value="123456" />
<property name="username" value="abc" />
</bean>
<bean id="messageSource"
class="org.springframework.context.support.ReloadableResourceBundleMessageSource">
<property name="basenames">
<list>
<value>classpath:messages_zh_CN</value>
<value>classpath:messages/messages_en_US-xmj_old</value>
</list>
</property>
</bean>
</beans>
<beans profile="xmj_new">
<bean id="dataSource"
class="org.springframework.jdbc.datasource.DriverManagerDataSource">
<property name="driverClassName" value="com.mysql.jdbc.Driver" />
<property name="url"
value="jdbc:mysql://127.0.0.1:3306/db1?characterEncoding=utf8" />
<property name="password" value="123456" />
<property name="username" value="abc" />
</bean>
<bean id="messageSource"
class="org.springframework.context.support.ReloadableResourceBundleMessageSource">
<property name="basenames">
<list>
<value>classpath:messages_zh_CN</value>
<value>classpath:messages/messages_en_US-xmj_new</value>
</list>
</property>
</bean>
</beans>
...
...
...


这里的message_en_US-*系列属性文件是配置站点的名称和黑名单的位置:

resource.blacklist.dir=/var/resource/blacklist.txt
system.title.id=system.xmj_old.title


[b][size=large]激活spring的profile[/size][/b]

profile是配置完了,但还要激活spring的profile特性。
在web.xml做如下配置:


<context-param>
<param-name>spring.profiles.active</param-name>
<param-value>xmj_old</param-value>
</context-param>


这样就激活spring配置文件中的profile为xmj_old的配置,但这样手动配置依然要改web.xml配置。
Maven也带了profile的功能,而且我们的项目一般都是由Maven管理的,下面介绍Maven配置profile。

[b][size=large]Maven 配置profile[/size][/b]
Maven配置profile也很简单,举例如下:

<profiles>
<profile>
<id>xmj_old</id>
<activation>
<activeByDefault>true</activeByDefault>
</activation>
<properties>
<profiles.activation>xmj_old</profiles.activation>
</properties>
<build>
<plugins>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>tomcat-maven-plugin</artifactId>
<version>1.1</version>
<configuration>
<!-- 配置项目自动发布服务器 -->
<url>http://xx.xx.xx.xx:8080/manager/text</url>
<path>/xmj-manager</path>
<server>Tomcat</server>
<warFile>target/${profiles.activation}.war</warFile>
</configuration>
</plugin>
</plugins>
</build>
</profile>
<profile>
<id>xmj_new</id>
<properties>
<profiles.activation>xmj_new</profiles.activation>
</properties>
<build>
<plugins>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>tomcat-maven-plugin</artifactId>
<version>1.1</version>
<configuration>
<!-- 配置项目自动发布服务器 -->
<url>http://xx2.xx.xx.xx:8080/manager/text</url>
<path>/xmj-manager</path>
<server>Tomcat</server>
<warFile>target/${profiles.activation}.war</warFile>
</configuration>
</plugin>
</plugins>
</build>
</profile>
...
...
...
</profiles>


activeByDefault标签配置true表示默认激活的环境,直接install就是使用此配置的环境。
这里有一个自定义属性配置:profiles.activation 它就是整合Maven profile 和spring profile 的重要配置

[b][size=large]整合Maven profile 和spring profile[/size][/b]

通过Maven管理web实现自动化,少改动就少出错,将上面web.xml配置改为下面的:

<context-param>
<param-name>spring.profiles.active</param-name>
<param-value>${profiles.activation}</param-value>
</context-param>


这还不算完,还要配置Maven的一个插件:

<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<configuration>
<warName>${profiles.activation}</warName>
<!-- 激活spring profile -->
<webResources>
<resource>
<filtering>true</filtering>
<directory>src/main/webapp</directory>
<includes>
<include>**/web.xml</include>
</includes>
</resource>
</webResources>
<warSourceDirectory>src/main/webapp</warSourceDirectory>
<webXml>src/main/webapp/WEB-INF/web.xml</webXml>
</configuration>
</plugin>


打包的时候Maven会去自动修改web.xml文件,根据占位符自动替换为对应的属性值
warName标签可以不配置,我这里加上了所以需要加上前面的target/${profiles.activation}.war,否则会报找不到war包的异常。

执行profile
下面是见证奇迹的时刻
在eclipse中执行命令:

clean install

前面配置的默认环境是xmj_old这个,在执行完命令之后target文件夹下面出现了一个名为xmj_old.war的war包

[img]http://dl2.iteye.com/upload/attachment/0094/9770/fbe5cfbb-fbb6-392b-8fec-415627ed8eab.jpg[/img]

打开war包查看web.xml

[img]http://dl2.iteye.com/upload/attachment/0094/9772/9f1d416e-c85d-39d9-be89-da78d9c33e38.jpg[/img]

再测试下切换到其他的环境
执行命令

clean install -P xmj_new

-P 参数后面加上profile的id即可完成自动切换,执行完之后看下是否已经自动切换到id为xmj_new的profile环境下
target文件下有了xmj_new.war的war包(xmj_old.war被clean掉了)

[img]http://dl2.iteye.com/upload/attachment/0094/9766/74a80b15-588c-3d5d-be27-5834be22ba80.jpg[/img]

打开war包查看web.xml文件

[img]http://dl2.iteye.com/upload/attachment/0094/9768/9f61ae13-d451-3ed9-aba0-37280b4827d1.jpg[/img]

如预期所料,Maven结合spring成功的完成了多环境的自动切换
注:上面web.xml中的display-name和webAppRootKey都是使用占位符${profiles.activation}然后Maven自动替换的,如果你的项目中使用log4j/logback和spring,然后同一个项目部署多个实例到一个tomcat中,建议配置webAppRootKey这个参数
请参考 [url=http://zilongsky-gmail-com.iteye.com/blog/2032070]log4j/logback + spring的webRootKey bug[/url]

[b][size=large]在本地eclipse内置tomcat中运行[/size][/b]

由于内置tomcat是直接编译源码然后放到指定的位置去加载
所以上述的方法对于在内置tomcat运行是行不通的,在本地测试就非常蛋疼了
网上说有设置项目属性中Maven的profile,查了下eclipse官网说是由于m2eclipse有bug的问题,这个配置已经给禁用了
那就要另觅他法了,下面介绍一种探索出的一个方法:

首先在main目录下新建一个profile文件夹,将WEB-INF下面的web.xml复制过来一份
然后将WEB-INF下面的web.xml中的占位符修改成默认的配置(即没有占位符的,在本地测试用的profile值)
profile文件夹下保留占位符的web.xml配置

[img]http://dl2.iteye.com/upload/attachment/0094/9764/0bc370ae-6534-38e4-ab92-824bebb70ffc.jpg[/img]

下面是WEB-INF下面没有占位符的正常的配置

[img]http://dl2.iteye.com/upload/attachment/0094/9762/f200cf90-f828-3840-adfc-24395bf84be2.jpg[/img]

这些占位符我都换成了ysxj
接下来修改Maven配置
将配置:

<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<configuration>
<warName>${profiles.activation}</warName>
<!-- 激活spring profile -->
<webResources>
<resource>
<filtering>true</filtering>
<directory>src/main/webapp</directory>
<includes>
<include>**/web.xml</include>
</includes>
</resource>
</webResources>
<warSourceDirectory>src/main/webapp</warSourceDirectory>
<webXml>src/main/webapp/WEB-INF/web.xml</webXml>
</configuration>
</plugin>

修改为:

<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<configuration>
<warName>${profiles.activation}</warName>
<!-- 激活spring profile -->
<webResources>
<resource>
<filtering>true</filtering>
<!-- 这里是刚刚创建的目录 -->
<directory>src/main/profile</directory>
<!-- 目标目录为WEB-INF -->
<targetPath>WEB-INF</targetPath>
<includes>
<include>**/web.xml</include>
</includes>
</resource>
</webResources>
<warSourceDirectory>src/main/webapp</warSourceDirectory>
<webXml>src/main/webapp/WEB-INF/web.xml</webXml>
</configuration>
</plugin>

最后见证奇迹
执行命令

install -P naruto

在target下面出现根据profile打的war包naruto.war
接下来证明可以在eclipse的内置tomcat使用
执行命令

eclipse:eclipse -Dwtpversion=1.5

编译成正常的eclipse工程,然后加入tomcat服务器,你会发现能运行成功。
这里tomcat使用的是源码中WEB-INF下的web.xml,即刚才将占位符修改为ysxj的那个web.xml
其原理就是在编译阶段将profile文件夹下的web.xml中的占位符替换成Maven中配置的属性,然后覆盖WEB-INF下面的web.xml
这种方法麻烦的一点就是如果web.xml文件有修改 ,两个记得要同步,一般情况下这个文件也极少动

ps. 骚年们不要手动了,来玩自动的吧
没有更多推荐了,返回首页