旅游项目(二)初涉Bootstrap

1.bootstrap是什么?

bootstrap，来自 Twitter，是目前最受欢迎的前端框架。bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。用它可以快速的搭建出网站,其中的栅格和css模块都非常出色。

2.bootstrap的优点

a.栅格系统：对用户调整屏幕尺寸，分辨率的支持表现良好。

b.css模块化：方便编辑

c.JavaScript插件：按照官方文档提供的格式写即可，并不需要真的熟练操作js和jQuery。

3.Bootstrap的不足

a.对IE兼容存在不小的问题：使用了一些CSS3的样式和H5的元素

b.其他样式的兼容性不好：如果有大量多样化的设计，而又想使用bootstrap就需要将框架作为底层修改：需要复写大量的样式，css层次混乱，难以维护。

***********************************************************************************************************

在达内的旅游项目和云笔记项目中都是用了bootstrap作为模板，作为后台响应式管理模板非常好用。

1.bootstrap模态框的设置(添加新的数据):

a.模态框的显示和隐藏

显示: $('#模态框id').modal("show")

显示: $('#模态框id').modal("hide")

b.模态框中如何显示内容

$("#模态框id 内容的位置").load(url,[callback])

c.如何选中表单中valid的值

$("#表单id input[name='valid']:checked"].val()

d.注册验证

$("表单ID").valid(); true or false

在jquery.validate.min.js中提供的方法.valid()，用于验证表单提交的数据合法性。

2.Tree Grid

treegrid是jquery的一个插件 基于bootstrap 是一个tree结构的table对象，效果如下：



js代码：

a.表格的参数设置:

var columns = [
{
field : 'selectItem',
radio : true
},
{
title : '分类id',
field : 'id',
visible : false,
align : 'center',
valign : 'middle',
width : '80px'
},
{
title : '分类名称',
field : 'name',
align : 'center',
valign : 'middle',
sortable : true,
width : '180px'
},
{
title : '上级分类',
field : 'parentName',
align : 'center',
valign : 'middle',
sortable : true,
width : '180px'
},
{
title : '排序号',
field : 'sort',
align : 'center',
valign : 'middle',
sortable : true,
width : '100px'
}];

b.初始化TreeTable

//选择要插入的div Id
var tableId = "typeTable";
//向服务器发送的请求地址
var url = "type/doFindGridTreeObjects.do";
//初始化TreeTable
var table = new TreeTable(tableId,url,columns);
//设置记录返回的id值
table.setIdField("id");
//设置记录分级的字段
table.setCodeField("id");
//设置记录分级的父级字段
table.setParentCodeField("parentId");
//是否默认全部展开
table.setExpandAll(false);
//选择哪行展开
table.setExpandColumn(0);
//异步提交从这里开始
table.init();

附上ajax异步提交的代码:

init: function () {
var tableId = this.bstableId;
this.btInstance =
$('#'+tableId).bootstrapTreeTable({
id: this.id,// 选取记录返回的值
code: this.code,// 用于设置父子关系
parentCode: this.parentCode,// 用于设置父子关系
rootCodeValue: this.rootCodeValue,//设置根节点code值----可指定根节点，默认为null,"",0,"0"
type: this.method, //请求数据的ajax类型
url: this.url,   //请求数据的ajax的url
ajaxParams: this.data, //请求数据的ajax的data属性
expandColumn: this.expandColumn,//在哪一列上面显示展开按钮,从0开始
striped: true,   //是否各行渐变色
expandAll: this.expandAll,  //是否全部展开
columns: this.columns,		//列数组
toolbar: "#" + this.toolbarId,//顶部工具条
height: this.height,
});
return this;
},

3.zTree与bootstrap结合使用

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

附上效果图:



a.zTree需要用到的参数

var zTree;
var setting = {
data : {
simpleData : {
enable : true,
idKey : "id",  //节点数据中保存唯一标识的属性名称
pIdKey : "parentId",  //节点数据中保存其父节点唯一标识的属性名称
rootPId : null  //根节点id
}
}
}

b.向服务器获取表格数据

//将zTree视图显示
$('#typeLayer').css('display','block');
var url="type/doLoadZTreeNodes.do";
$.get(url,function(result){
if(result.state==1){
alert(result.message);
return;
}
//初始化zTree
zTree = $.fn.zTree.init($('#typeTree'),setting,result.data);
});