前言：之前博主分享过knockoutJS和BootstrapTable的一些基础用法，都是写基础应用，根本谈不上封装，仅仅是避免了html控件的取值和赋值，远远没有将MVVM的精妙展现出来。最近项目打算正式将ko用起来，于是乎对ko和bootstraptable做了一些封装，在此分享出来供园友们参考。封装思路参考博客园大神萧秦，如果园友们有更好的方法，欢迎讨论。KnockoutJS系列文章： BootstrapTable与KnockoutJS相结合实现增删改查功能【一】 BootstrapT...
在我们对一个页面进行设计时，分块是必须的，没有一个网站是一栏而下的，除非你是在看小说，否则你的页面设计一定是分块的，即它由于多个panel组件，在bootstrap里叫到栅格系统，而在每行每列进行宏观的布局后，就是在每一个大块里建立小块，而小块可以使用Panel来实现，下面看个例子<div class="panel panel-default"> <div class="panel-heading">Panel heading without title</div> <div class="panel-body"> Panel content </d...
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：表格类 下表样式可用于表格中：<tr>, <th> 和 <td> 类 下表的类可用于表格的行或者单元格：基本的表格 如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加 class .table，如下面实例所示：<div class="row"><table class="table"><caption class="text-center">基本表格布局</caption><thead><tr><th>编号</th><th>城市</th><...
学习使用bootstrap表格是对客户端进行分页的时候，在朋友的帮助下，找到了文档http://bootstrap-table.wenzhixin.net.cn/examples/ 找到了传到后台的每页条数Limit，和记录开始数Offset。 开始封装，分享一下我的代码，从bootstrap table 获取页码和页数，并交给后台处理。 $(#table).bootstrapTable({url: <%=path%>/FeedList.cqzk,striped: true,pagination: true,pageList: [3,5,20],pageSize:3,...
基于Bootstrap的轻量级表格插件Bootstrap Table只需简单的配置，就可以拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能，更好的提高开发效率和减少开发时间。1、插件描述：Bootstrap Table显示数据表格格式,提供了丰富的支持,单选框、复选框、排序、分页等，插件下载。 2、特点：基于Bootstrap 3开发（同时支持 Bootstrap 2） 响应式界面 固定表头 完全可配置 支持data属性 显示/隐藏列 显示/隐藏表头 使用A...
一、Bootstrap Table的引入关于Bootstrap Table的引入，一般来说还是两种方法： 1、直接下载源码，添加到项目里面来。 由于Bootstrap Table是Bootstrap的一个组件，所以它是依赖Bootstrap的，我们首先需要添加Bootstrap的引用。 2、使用我们神奇的Nuget 打开Nuget，搜索这两个包Bootstrap已经是最新的3.3.5了，我们直接安装即可。而Bootstrap Table的版本竟然是0.4，这也太坑爹了。所以博主建议Bootstrap Table的包就直接在源码里面...
BootStrap table 是一个轻量级的table插件，使用AJAX获取JSON格式的数据，其分页和数据填充很方便，支持国际化。最近后台使用此插件做了一个表格应用，做个总结。 1.使用方法 可以通过又拍云提供的CDN获取js插件，样式表和国际化插件，或者直接去官网下载。将下面的js插件和样式放到html head 头里即可使用。 //样式 <link href="http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.css" rel="stylesheet"/> <scr...
在上篇文章给大家介绍了BootstrapTable与KnockoutJS相结合实现增删改查功能【一】，介绍了下knockout.js的一些基础用法。接下来通过本文继续给大家介绍。如果你也打算用ko去做项目，且看看吧！Bootstrap是一个前端框架，解放Web开发者的好东东，展现出的UI非常高端大气上档次，理论上可以不用写一行css。只要在标签中加上合适的属性即可。 KnockoutJS是一个JavaScript实现的MVVM框架。非常棒。比如列表数据项增减后，不需要重新刷新...
bootstrap table系列： JS表格组件神器bootstrap table详解（基础版） JS组件系列之Bootstrap table表格组件神器【终结篇】 JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】 Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据，支持单选，复选框，排序，分页,显示/隐藏列,固定标题滚动表,响应式设计，Ajax加载JSON数据，点击排序的列，卡片视图等。那么本文给大家介绍JS组件系列之Bootstrap table表...
Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据，支持单选，复选框，排序，分页,显示/隐藏列,固定标题滚动表,响应式设计，Ajax加载JSON数据，点击排序的列，卡片视图等。今天就结合Bootstrap table的父子表和行列调序的用法再来介绍下它稍微高级点的用法。 bootstrap table系列： JS表格组件神器bootstrap table详解（基础版） JS组件系列之Bootstrap table表格组件神器【终结篇】 JS组件系列之Bootstrap table表格...
Bootstrap是一个前端框架，解放Web开发者的好东东，展现出的UI非常高端大气上档次，理论上可以不用写一行css。只要在标签中加上合适的属性即可。 KnockoutJS是一个JavaScript实现的MVVM框架。非常棒。比如列表数据项增减后，不需要重新刷新整个控件片段或自己写JS增删节点，只要预先定义模板和符合其语法定义的属性即可。简单的说，我们只需要关注数据的存取。 一、Knockout.js简介1、Knockout.js和MVVM如今，各种前端框架应接不暇...
Bootstrap原生的table组件只能满足简单的数据展示，满足不了更富有操作性的要求。当然了，你可以找到一款叫做“DataTables-1.10.11”的基于bootstrap的table组件，但如果你对API看得不甚了解的话，用起来可就痛苦了，但是如果你选择使用jqGrid，那么本篇教程就给你带来了解决这种富操作性table的解决方案。 一、效果展示OK，就展示这一张图片，相信你已经爱上了bootstrap版的jqGrid，和bootstrap很兼容，简直完美，当然了，这需要我...
bootstrap为我们定义了简洁易用的样式，我们只需要很少的样式指定，就可以完成简约优雅的页面展示。 本篇主要介绍以下几个基本控件： 1. table 2. form 3. button 1. 表格（table）依旧使用<table><thead><tbody><tr><th><td>来表现表格。有如下的类来控制table的属性， table样式默认会占满父容器 <div class="container"><div class="row"><div class="col-md-8 col-md-offset-2"><table class="table table-bordered table-str...
最近客户提出需求，想将原有的管理系统，做下优化，通过手机也能很好展现，想到2个方案: a方案：保留原有的页面，新设计一套适合手机的页面，当手机访问时，进入m.zhy.com(手机页面)，pc设备访问时，进入www.zhy.com(pc页面) b方案：采用bootstrap框架,替换原有页面，自动适应手机、平板、PC 设备 采用a方案，需要设计一套界面，并且要得重新写适合页面的接口，考虑到时间及成本问题，故项目采用了b方案 一、效果展示二、BootStrap...
前言：前天刚写了篇JS组件Bootstrap Table表格行拖拽效果，今天接到新的需要，需要在之前表格行拖拽的基础上能够同时拖拽选中的多行。用了半天时间研究了下，效果是出来了，但是感觉不尽如人意。先把它分享出来，以后想到更好的办法再优化吧。 一、效果展示 1、拖动前2、拖动中3、拖动后4、撤销回到拖动前状态二、需求分析 通过上篇我们知道，如果要实现拖拽，必须要有一个可以拖拽的标签，或者叫容器，比如上篇里面的tr就是一个拖...