bootstrap工作中遇到的知识汇总

     关于作者：

• 郑云飞, 程序员Java（web前端，web后端，oracle数据库or mysql数据库）
• 艺名：天放
• weibo：@tianFang
• blog: zhengyunfei.iteye.com
• email: [e-mail]
• 学习路线图
•  跟我一步一步学习bootstrap

       bootstrap在网页中使用

       bootstrap布局    

       bootstrap响应式布局

       bootstrap工作中遇到的知识点

 

     这几天很忙，间隔了这么多天，今天周末了才腾出时间写博客。今天本来也没有时间的，要去加班，可是刚到公司，说是机房要停电整修。好吧，只好回家好好的睡了一觉，醒来就总结一下这几天工作中遇到的bootstrap的知识点吧。

      首先说一说modal，如何弹出一个对话框，首先定义个对话框

    

<div class="modal hide fade" id=''myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

 

 它有三个modal-header，modal-body和modal-footer组成，这是一个对话框的格式，那么如何弹出一个对话框呢？

 

比如定义一个按钮，当点击按钮的时候，触发弹出框事件。按钮格式如

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
只要将data-target的值和对话框的id值一样，点击对话框的时候，就会自动触发对话框事件，使其弹出来。
或者手动触发：
$('#myModal').modal()
 

 

 1、绑定事件，在关闭的时候，直接将数据清除： 

 

$("#model").on("hidden.bs.model",function(e){$(this).removeData();});

2、修改一下请求的url，添加随机参数，强制刷新，先用jQuery的get方法取内容，再放到modal中。如下： 

function remoteUrl(u){
    u += '&t=' + Math.random(1000)
    $.get(u, '', function(data){
        $('#remoteModal .modal-body').html(data)
    })
    $('#remoteModal').modal({show:true,backdrop:false})
}

 在一个问题就是datagrid表格的问题，不过我们工作中不是用的bootstrap的表格，而是用的

FuelUx的datagrid，首先我们定义一个datagrid

<table id="MyGrid" class="table table-bordered datagrid">
      <thead>
	<tr>
		<th></th>
         </tr>
</thead>
<tfoot>
 <tr><th>
<div class="datagrid-footer-left" style="display:none;">
</div>
<div class="datagrid-footer-right" style="display:none;">
</div>
</th>
</tr></tfoot>
</table>

 

 

Using datagrid

Call the datagrid via javascript:

1. $('#MyGrid').datagrid({ dataSource: dataSource, stretchHeight:true})

Data Source

Provide a data source to the datagrid to supply column information and data. Your data source must support the following two methods.

Name Parameters Description

columns	(none)	Returns an array of objects containing column information
data	options (object), callback(function)	The options parameter contains search, sortProperty, sortDirection, pageIndex, and pageSize. Retrieve data then callcallback with an object containing data, start, end, count, pages, and page. View the source of this page for an example static data source.

Methods

Fuel UX's datagrid exposes a method for reloading the grid.

Method Description

reload	This method causes the datagrid to reload the data from the dataSource and return to the first page.
clearSelectedItems	If row selection is enabled, this method will clear all rows currently selected.
setSelectedItems	If row selection is enabled, this method will programmatically set specified rows within the datagrid by each element's primary key value. The argument passed to this method should be an array of string values. Note, this relies on the _data array being included in the DataSource as provided in the samples directory.
getSelectedItems	If row selection is enabled, this method returns an object containing all the selected items within the datagrid. Each property in the returned object represents a selected value (by primary key) with the corresponding values being the selected data elements.

  $('#MyGrid').datagrid(columns: [{
                    property: 'payDate',
                    label: '支付时间',
                    sortable: true
                }, {
                    property: 'amount',
                    label: '支付金额',
                    sortable: true
                }  ],data:data: function(options, callback) {
                var url="<%=basePath%>/payment/search";
                var param={"postpaidPlanId":postpaidPlanId};
                $.ajax(url,{
                    dataType: 'JSON',
                    data:param,
                    type: 'post'
                }).done(function(res) {
                            callback({
                                data: res.data,
                                start: res.start,
                                end: res.end,
                                count: res.count,
                                pages: res.pages,
                                page: res.page
                            });
                        });
            }
        });

 这样就可以初始化显示一个datagrid。

 但是在工作中还要显示自定义列，那么如何在datagrid显示自定义列呢？

 如下:

{
                property: 'operation',
                label: '操作',
              
                render: function (item)
                {
                
                    var html='';
                    if(item.payMode=='0')  {
                        html="<input type='button' class='btn btn-success' value='制定'/>
                             <input type='button' class='btn btn-warning' value='修改'/>" +
                            "<input type='button' class='btn btn-inverse' value='查看'/> ";
                    }else{
                       html="<input type='button' class='btn btn-warning' value='修改'/>" +
                       "<input type='button' class='btn btn-inverse' value='查看'/> ";
                    }
                    return html;
                },  
                sortable: true
            }

 上面代码在datagrid中自定义一列显示button按钮。

  此外我们还在datagrid中显示下拉列表：

{
                property: 'select',
                label: '类型',
             
                render: function (item)
                {
                  
                   var html="<select id='myselect' >
                                 <option value='0'>次数</option>
                                 <option value='1'>比例</option>
                              </select>"
                    return html;
                },   
                sortable: true
}

    你想显示什么，就自定义html代码，显示就可以了。

   3.另外一个遇到的问题就是动态添加一个表格，其中一个表格显示时间控件。

    动态添加tr的方法如下：

  

//动态增加<tr/>
    $("#btn2").click(function(){
        var html='<div class="datepicker-target"></div>';
        var _len = $("#tab2 tr").length;
        var trhtml= "<tr    align='center'  id="+_len+">"+   " <td>"+html+"</td>"
                +"<td><input type='text' class='span2' name='money'/></td>"
                +"<td><button class='btn btn-danger' type='button' onclick='javascript:deltr("+_len+")'   >删除</button></td></tr>" ;
        $("#tab2").append(trhtml);
        $('.datepicker-target').datepicker();
    }) ;

 

  刚开始时间控件显示出来了，但是无论如何也赋值不上，最后发现，原因是我动态添加的时候，时间控件赋值的id都一样了，所以赋值不了，最后解决方法，将id换成class属性，通过class属性显示时间控件

$('.datepicker-target').datepicker();

 

 

上一篇博客：bootstrap响应式布局     下一篇博客：