bootstrapangularjs和jq综合制作一个完整的表格文档格式.docx
- 文档编号:17069270
- 上传时间:2022-11-28
- 格式:DOCX
- 页数:9
- 大小:18.22KB
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>
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- bootstrapangularjs jq 综合 制作 一个 完整 表格