bootstrapangularjs和jq综合制作一个完整的表格文档格式.docx

bootstrapangularjs和jq综合制作一个完整的表格文档格式.docx

《bootstrapangularjs和jq综合制作一个完整的表格文档格式.docx》由会员分享，可在线阅读，更多相关《bootstrapangularjs和jq综合制作一个完整的表格文档格式.docx（9页珍藏版）》请在冰豆网上搜索。

navbarnavbar-innerblock-header"

mutedpull-left"

{{kaohzbTitle}}<

/div>

span12"

style="

float:

left;

"

table-toolbar"

buttonstyle="

margin-left:

5px;

id="

refresh"

ng-click="

refresh（）"

class="

btnbtn-success"

iclass="

icon-refreshicon-white"

/i>

刷新

/button>

buttonng-disabled="

isdisabled"

class="

btn"

ng-class="

{'

btn-info'

:

isInfo}"

savekaohzb"

ng-click="

save（）"

icon-editicon-white"

保存

row-fluid"

span6"

tableclass="

tabletable-stripedtable-borderedtable-hover"

id="

example"

margin-top:

10px;

thead>

tr>

thstyle="

20px;

rowspan="

2"

全选<

br>

inputtype="

checkbox"

ng-model="

selectAll"

/th>

text-align:

center;

width:

50px;

vertical-align:

middle"

序号<

150px;

名称<

日期<

colspan="

3"

比赛队伍（红）<

比赛队伍（蓝）<

比分<

说明<

玩家支持队伍<

/tr>

80px;

第一场<

第二场<

/thead>

tbodyng-click="

fun（）"

page"

ng-show="

isshow"

--trackbytb.id-->

trng-repeat="

tbinsaveDate"

--只用angularjs实现点击一行就选中暂时无法实现-->

tdstyle="

ng-checked="

/td>

center;

{{tb.id}}<

{{tb.zbname}}<

{{tb.zbtime}}<

{{tb.zbrul1}}<

{{tb.zbrul2}}<

text"

contenteditable="

true"

tb.por"

--2016.1.19通过可编译的div来代替输入框-->

{{tb.score}}<

td>

selectname="

ng-change="

changetype（adds）"

adds"

min-width:

80px;

margin-bottom:

0"

optionvalue="

isShow"

{{tb.type}}<

/option>

支持红方"

支持红方<

支持蓝方"

支持蓝方<

双方相同"

双方相同<

/select>

/tbody>

/table>

pagination"

ulstyle="

right"

liid="

previous"

ahref="

上一页<

/a>

/li>

li>

--用于页标的显示-->

ulid="

page_num_all"

/ul>

next"

1pxsolid#ddd;

下一页<

span>

当前为第<

spanclass="

num"

current_page"

/span>

页，总共<

page_all"

页

您当前对select的操作值为:

{{typename}}

--ENDFORM-->

/body>

js代码：

script>

angular.module（"

[]）.controller（'

myCtrl'

function（$scope）{

$scope.kaohzbTitle="

考核指标维护"

;

$scope.search=newObject（）;

$scope.isdisabled=false;

$scope.isInfo=false;

$scope.saveDate="

//用于保存得到的原始数据

//$http.post请求表格数据

//模仿请求得到的数据

vardatalist=[{

id:

1,zbname:

中亚赛区比赛"

zbtime:

2015-12-03"

zbrul1:

胜利"

zbrul2:

失败"

por:

请输入说明内容"

score:

2:

1"

type:

},{

2,zbname:

日韩赛区比赛"

2015-11-11"

3,zbname:

欧美赛区比赛"

2015-3-03"

4,zbname:

中东赛区比赛"

2016-1-05"

5,zbname:

北京赛区比赛"

2014-12-23"

6,zbname:

韩国赛区比赛"

2015-11-01"

7,zbname:

日本赛区比赛"

2011-1-23"

8,zbname:

2013-12-15"

9,zbname:

2015-10-17"

10,zbname:

2015-11-21"

11,zbname:

2015-2-02"

12,zbname:

2015-2-05"

}];

$scope.fun=function（）{

vare=window.event||arguments[0];

varsrc=e.srcElement||e.target;

if（src.nodeName=="

TD"

）{

varpar=src.parentNode;

varsd=par.getElementsByTagName（"

td"

）[0];

if（sd.firstChild.checked==true）{

sd.firstChild.checked=false;

}else{

$（"

trtd"

）.attr（"

checked"

false）;

sd.firstChild.checked=true;

$scope.refresh=function（）{//点击刷新按钮显示表格

$scope.saveDate=datalist;

//console.log（"

结束赋予数据"

）;

$scope.$watch（"

saveDate"

function（）{//2016.1.20监听列表生成数据，当发生变化时执行刷新列表

table_page（）;

$scope.isshow=true;

}）;

$scope.save=function（）{//页面提交按钮

console.log（"

准备保存"

console.log（$scope.saveDate）;

//只要数据改变，自动保存到原始数据列表中

//表格分页功能

functiontable_page（）{

varshow_page=5;

//每页显示的条数

varpage_all=$（"

#page"

）.children（）.size（）;

//总条数

varcurrent_page=1;

//当前页

//console.log（page_all）;

varpage_num=Math.ceil（page_all/show_page）;

//总页数

varcurrent_num=0;

//用于生成页标的计数器

varli="

//页标元素

while（page_num>

current_num）{//循环生成页标元素

li+='

liclass="

page_num"

javasctip:

（0）"

'

+（current_num+1）+'

current_num++;

#page_num_all"

）.html（li）;

//添加页标到页面

$（'

#pagetr'

）.css（'

display'

'

none'

//设置隐藏

）.slice（0,show_page）.css（'

//设置显示

#current_page"

）.html（"

"

+current_page+"

//显示当前页

#page_all"

+page_num+"

//显示总页数

#previous"

）.click（function（）{//上一页

varnew_page=parseInt（$（"

）.text（））-1;

if（new_page>

0）{

+new_page+"

tab_page（new_page）;

#next"

）.click（function（）{//下一页

）.text（））+1;

//当前页标

if（new_page<

=page_num）{//判断是否为最后或第一页

.page_num"

）.click（function（）{//页标跳转

varnew_page=parseInt（$（this）.text（））;

functiontab_page（index）{//切换对应页标的页面

varstart=（index-1）*show_page;

//开始截取的页标

varend=start+show_page;

//截取个数

#page'

）.children（）.css（'

）.slice（start,end）.css（'

current_page=index;

}）.directive（'

contenteditable'

function（）{//自定义ngModel的属性可以用在div等其他元素中

return{

restrict:

'

A'

//作为属性使用

require:

?

ngModel'

//此指令所代替的函数

link:

function（scope,element,attrs,ngModel）{

if（!

ngModel）{

return;

}//donothingifnong-model

//SpecifyhowUIshouldbeupdated

ngModel.$render=function（）{

element.html（ngModel.$viewValue||'

};

//Listenforchangeeventstoenablebinding

element.on（'

blurkeyupchange'

function（）{

scope.$apply（readViewText）;

//Noneedtoinitialize,AngularJSwillinitializethetextbasedonng-modelattribute

//Writedatatothemodel

functionreadViewText（）{

varhtml=element.html（）;

//Whenweclearthecontenteditablethebrowserleavesa<

behind

//Ifstrip-brattributeisprovidedthenwestripthisout

if（attrs.stripBr&

&

html==='

）{

html='

ngModel.$setViewValue（html）;

}）

/script>