betway必威亚洲官网实例分解一,Bootstrap表格分页

本文使用Bootstrap-table来对表格进行分页,关于Bootstrap-table以及下载插件包请点击官网:

前言

我在上一篇【javascript基础】基本概念中介绍了javascript的一些基本概念,多谢大家的阅读和意见,自己写的东西可以被大家阅读,真心高兴,刚开始发布的时候我一直盯着阅读人数,虽然知道大家可能就是点开一下而已,但是还是给我一些继续写下去的信心。那今天写一些关于javascript函数的一些知识,帮助大家熟悉或者复习一些函数的基本知识。

PS:最近jQuery源码交流群( 239147101)加了不少热新人,希望大家还是以学习为主,尽量少灌水,给大家一个好的提升自己的环境。

之前项目中实现过这样的一套前端框架,但angular版本还是1.0.X的,bootstrap是2.0的。当时项目时间较紧,加上研究不够深入,对angular理解不够透彻,虽然功能实现,但也确实存在一些bug,很多地方可以优化。所以项目准备升级到angular1.3.X、bootstrap3。

首先,需要引用脚本:bootstrap-table.jsbootstrap-table.min.js,以及bootstrap-table-zh-CN.js

函数

函数在任何一种编程语言中都是一个很重要的结构或者组成部分,编程中的复杂结构和功能都会有函数的参与。javascript中的函数是一个对象,函数对象时Function类型的实例,由于Function类型是一个引用类型,那么函数可以拥有自己的方法和属性,同时也因为函数是一个对象,那么函数名是一个指向函数对象的指针,可以被赋值。下面详细介绍函数的各个部分。

下面是调研时做得一个简单的框架demo,angularJS1.3.15,bootstrap3,requireJS2.1.16,ngroute1.3.15.模拟对话框使用了ngDialog,实现了动态template和controller文件,下面会有介绍。

HTML页面内容如下:

创建函数

函数的创建有三种方式,分别为使用Function的构造函数、函数声明、函数表达式,下面分别介绍这三种方法。

文件结构参考网上各种大神的建议,将各个页面和对应的controller放到了同一个文件目录下,这样子确实方便了查找,不用再翻到controller的文件夹中查找页面对应的controller,结构如下:

betway必威亚洲官网 1betway必威亚洲官网 2

Function构造函数

这种方式是直接new出来一个Function
实例,通过使用Function的构造函数进行创建函数。Function构造函数可以接收任意多个参数,但是最后一个参数会被认为是函数体,前面的所以参数被当做被创建出来的函数的参数。

var test = new Function("a","b","return a + b");//参数a和b,函数体return a + b
console.log(test(1,2));//3

我们可以看出比较的麻烦,并且《javascript高级程序设计》也不推荐我们使用这种方式,主要是因为浏览器要解析常规的javascript代码之外,还要解析传入的参数字符串,这个类似eval()的解释,影响性能。

[img]data/attachment/album/201506/04/164151hpimplpsw41gpp4a.gif[/img]

<table data-toggle="table" data-url="/Home/GetPaginationData2" data-height="465"          data-side-pagination="server" data-pagination="true" data-page-list="[5,10,20,50]">      <thead>          <tr>              <th data-field="BusNo" data-align="center">乘车码</th>              <th data-field="OrderId" data-align="center">订单号</th>              <th data-field="OrderDate" data-align="center" data-formatter="FormatDateTime">订单日期</th>          </tr>      </thead>  </table>

函数表达式

这种方式是创建的常见方式之一,具体请看

var test = function(a,b){
  return a + b;  
}
console.log(test(1,2));

上面的代码就是创建一个函数,使用test()进行调用。其实,上面的代码是先创建了一个匿名的函数,之后把这个匿名的函数赋值给test变量。每个函数有一个name属性,这个属性不是ECMA标准的一部分,但是许多地方可以使用它。我们可以给上面的函数起一个名字,具体下面代码

//函数的名字newName
var test = function newName(a,b){
  return a + b;  
}
console.log(test.name);//newName

//匿名函数
var nTest = function (a,b){
  return a + b;  
}
console.log(nTest.name);//""

这个属性在后面详细解释吧。

首先我们来说一说bootstrap3,bootstrap3和bootsrtap2相比,不同的地方也是蛮多的,但对我们项目而言,升级起来,改动量最大的就是页面的布局这一方面,bootstrap2中span*在bootstrap3中已经不复存在
,变成了col-**-*,这个好处是多多的,移动优先嘛。麻烦的就是我们这些程序员了,苦逼的改代码吧。

View Code

函数声明

这种方式和C语言中的很类似,这种是最常见的一种创建函数的方法。是通过关键字function直接声明,请看

function test(a,b){
  return a + b;  
}
console.log(test(1,2));//3
console.log(test.name);//test

其它的不多说,官网上面都有详细说明,送上中文网地址:

data-toggle=”table”
标记这是一个表格,并引用插件里的功能,data-pagination=”true”
表示对表格进行分页,并会调出分页栏,data-side-pagination=”server”
标记这是从后台进行分页,data-page-list=”[5,10,20,50]”表示每页可以显示5,10,20,50条记录可选,列中的data-field绑定返回的数据属性。data-url
表示使用URL的方式定位到数据,本文从后台获得JSON格式的数据。返回的JSON中有两个数据“rows”和“total”,“rows”是表格中的已在服务器端分页的数据,“total”是数据记录总数,前端插件会根据“total”计算出总的页面数。后台代码如下:

区别

以上介绍了三个创建函数的方式,现在介绍三种的区别,确切的说是后两种的区别,因为Function不推荐使用,性能是一大原因。区别就是使用函数声明这种方式会使函数的声明提前,类似前面我们提到的变量申明的提前。也就是说,使用函数申明方式,我们可以将函数的声明放在调用函数代码的后面,因为解析器会在代码执行之前将函数的声明提升,提到源代码树的顶部,而函数表达式方式则会报错,具体请看

//调用函数
console.log(test(1,2));//3
//创建函数(函数申明方式)
function test(a,b){
  return a + b;  
}
//上面的函数相等于
//创建函数(函数申明方式)
//function test(a,b){
//  return a + b;  
//}
//console.log(test(1,2));//3

//调用函数
console.log(ntest(1,2));//TypeError: undefined is not a function
//创建函数(函数表达式方式)
var ntest = function (a,b){
  return a + b;  
}
 1 <!DOCTYPE html>   2 <html>   3    4 <head>   5 <meta charset="utf-8">   6 <title>fish.UI.index</title>   7 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">   8 <link rel="stylesheet"   />   9 <link rel="stylesheet"   />  10 <link rel="stylesheet"   />  11 <link rel="stylesheet"   />  12 </head>  13   14 <body ng-controller='mainctrl'>  15 <div >  16 <div >  17 <div >  18 <mymenu></mymenu>  19 </div>  20 <div  ng-view>  21 </div>  22 </div>  23 </div>  24 <script src="../../resources/plugin/require/require.js" defer async="true" data-main="../../resources/main"></script>  25 </body>  26   27 </html>

betway必威亚洲官网 3betway必威亚洲官网 4

not重载

javascript语言不像java那些语言有函数重载这一概念,其实函数名就是一个指针,指向一个Function实例的地址,当然只能指向一个函数,当然没有重载的概念了,只有覆盖,后面定义的函数覆盖前面定义的函数,具体请看

function test(a,b){
  return a + b;  
}
//下面的函数覆盖上面的
function test(a,b){
  return a + b + 100;  
}

console.log(test(0,0));//100

也就是说如果一个同名的函数表达式和函数申明的函数在一起,无论位置是怎么样的,最后的函数就会是用函数表达式创建的函数,因为函数申明会提升到顶部嘛,看看下面的代码

var test = function (a,b){
  return a + b -100;
}

function test(a,b){//会被下面的函数覆盖
  return a + b;  
}

function test(a,b){//会被函数表达式覆盖
  return a + b + 100;  
}

console.log(test(0,0));//-100

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图