angularjs怎样不使用数据库修改表格里的数据_工具

appdirective("delete",function($document){

return{

restrict:'AE',

require: 'ngModel',

link:function(scope, element, attrs,ngModel){

elementbind("click",function(){

var id = ngModel$modelValueid;

alert("delete item where employee id:=" + id);

scope$apply(function(){

for(var i=0; i<scopeemployeeslength; i++){

if(scopeemployees[i]id==id){

consolelog(scopeemployees[i])

scopeemployeessplice(i,1);

}

consolelog(scopeemployees);

})

}

});

基本上就完工了。这里我没有用任何现成的angular 插件，这只是对angular基本原理的阐述，如有误导或者有能简单的方法请指教。

用ng-repeat命令循环输出数组，数组内的元素随你定，angularjs是数据双向绑定的

举例

<!DOCTYPE html>

<html>

<head>

第一步，打开HBuilder开发工具，在指定的Web项目中新建静态页面inithtml，并引入Bootstrap和AngularJS相关的文件

第二步，在body元素添加ng-controller指令，并在里面添加<table></table>

第三步，在<script></script>里编写AngularJS初始化函数，并声明控制器

第四步，预览该静态页面，在浏览器查看页面效果，显示一个输入框和按钮

第五步，在控制器中添加变量model，这个变量赋值数组

第六步，在表格table循环model变量，遍历该数组并给表格赋值

注意事项

注意AngularJS动态获取表格数据

注意AngularJS动态赋值

Angular UI Tree是一个AngularJS UI 组件，可排序嵌套列表，提供拖放支持，不依赖于jQuery。

特性

使用原生AngularJS范围数据绑定

排序并通过整个树移动项目

Prevent elements from accepting child nodes

支持的浏览器

The Angular UI Tree is tested with the following browsers:

Chrome (stable)

Firefox

IE 8, 9 and 10

For IE8 support, make sure you do the following:

include an ES5 shim

make your AngularJS application compatible with Internet Explorer

use jQuery 1x

用到

using SystemDataSqlClient;//命名空间

SQL 查询

string connection_str=@"Integrated Security=SSPI;Persist Security Info=False;Initial Catalog=ChatRoom;Data Source=\sqlexpress";

string select_str="select 字段 from 表名 [where 字段=值]";//"[之间的内容]"是可选的

SqlConnection con=new SqlConnection(connection_str);//一，创建数据库连接对象

SqlCommand com=new SqlCommand(select_str,con);//二，创建数据 *** 作对象

conOpen();//现在用的是连接 *** 作方法，所以要先打开这个数据连接对象的连接

DataReader _dataReader = comExcuteReader();

while(_dataReaderNext())//遍历

{

string temp += dataReader["字段"]ToString()+"\r\n";

}

conClose();//关闭数据库连接对象

MessageBoxShow(temp);

以上这种方法是称为连接式 *** 作。

以下这种方法是称为非连接式 *** 作。

using SystemDataSqlClient;//因为要用到SQL对象

using SystemData;//要用到数据集对象，如以下将要用到：DataSet对象

string connection_str=@"Integrated Security=SSPI;Persist Security Info=False;Initial Catalog=ChatRoom;Data Source=\sqlexpress";

string select_str="select 字段 from 表名 [where 字段=值]";//"[之间的内容]"是可选的

SqlConnection con=new SqlConnection(connection_str);//一，创建数据库连接对象

SqlDataAdapter DataAdapter=new SqlDataAdapter(select_str,con);//二，创建数据 *** 作对象

DataSet ds=new DataSet();

DataAdapterFill(ds);//DataAdapterFill(填充对象)//函数是将除处理的select_str语句得来结果填充到指定的填充对象

string temp="";

foreact(DataRow dr in dsTable[0]Rows)//遍历

{

temp+=dr["字段"]ToString();

}

MessageBoxShow(temp);

至少楼主说的要增删改查。

就是修改select_str字符串就行了。

select(查询):"Select 字段 from 表名 [where 条件]";

update(更新):"Update 列名 set 字段=值 [where 条件]";

insert(插入):"Insert [into] 表名 Values(字段[,字段,,]) [where 条件]";

delete(删除):"delect from 表名 [where 条件]";

当然，除了select(查询)是有返回数据，其它update(更新),insert(插入),delete(删除)都只是返回 *** 作状态值。

首先，表格采用的是BootStrap样式编辑的，主要使用的是angularjs，为了方便也有jQuery的方法，在测试时需自行引入bootstrap，angularjs和jq的文件。

整体代码预览：

HTML：

<!DOCTYPE html>

<head>

//需要自行引入BOOTStrap，angularjs和jQuery的js，css文件

<style>

pagination num{

font-size:22px;color:red;

}

text{

margin:0 auto;

border:1px solid #ccc;

width:100%;

max-width:200px;

}

</style>

</head>

<div class="muted pull-left">{{kaohzbTitle}}</div>

</div>

<button style="margin-left: 5px;" id="refresh" ng-click="refresh()"

class="btn btn-success">

<i class=" icon-refresh icon-white"></i> 刷新

</button>

<button ng-disabled="isdisabled" class="btn" ng-class="{'btn-info':isInfo}" id="savekaohzb"

ng-click="save()">

<i class="icon-edit icon-white"></i> 保存

</button>

</div>

<table class="table table-striped table-bordered table-hover"

id="example" style="margin-top:10px;">

<thead>

<tr>

<th style="text-align: center; width: 150px;vertical-align: middle" rowspan="2">玩家支持队伍</th>

</tr>

<tr>

</tr>

</thead>

<td style="text-align:center;">{{tbzbname}}</td>

<td style="text-align:center;">{{tbzbtime}}</td>

<td style="text-align:center;">{{tbzbrul1}}</td>

<td style="text-align:center;">{{tbzbrul2}}</td>

<td style="text-align:center;">{{tbzbrul2}}</td>

<td style="text-align:center;">{{tbzbrul1}}</td>

<td style="text-align:center;">{{tbscore}}</td>

<td>

<option value="" ng-show="isShow">{{tbtype}}</option>

</select>

</td>

</tr>

</tbody>

</table>

</div>

</ul>

</li>

</ul>

<span>

当前为第<span class="num" id="current_page"></span>页，总共<span class="num" id="page_all"></span>页

</span>

<span>您当前对select的 *** 作值为:</span>{{typename}}

</div>

</div>

</body>

js代码：

angularmodule("myModule",[])controller('myCtrl', function($scope) {

$scopekaohzbTitle = "考核指标维护";

$scopesearch = new Object();

$scopeisdisabled=false;

$scopeisInfo=false;

$scopesaveDate="";//用于保存得到的原始数据

// $>

// 模仿请求得到的数据

var datalist=[{

id:1,zbname:"中亚赛区比赛",zbtime:"2015-12-03",zbrul1:"胜利",zbrul2:"失败",por:"请输入说明内容",score:"2:1",type:"支持红方"},{

id:2,zbname:"日韩赛区比赛",zbtime:"2015-11-11",zbrul1:"胜利",zbrul2:"胜利",por:"请输入说明内容",score:"2:1",type:"支持蓝方"},{

id:3,zbname:"欧美赛区比赛",zbtime:"2015-3-03",zbrul1:"失败",zbrul2:"胜利",por:"请输入说明内容",score:"2:1",type:"双方相同"},{

id:4,zbname:"中东赛区比赛",zbtime:"2016-1-05",zbrul1:"胜利",zbrul2:"失败",por:"请输入说明内容",score:"2:1",type:"支持蓝方"},{

id:5,zbname:"北京赛区比赛",zbtime:"2014-12-23",zbrul1:"失败",zbrul2:"胜利",por:"请输入说明内容",score:"2:1",type:"双方相同"},{

id:6,zbname:"韩国赛区比赛",zbtime:"2015-11-01",zbrul1:"失败",zbrul2:"胜利",por:"请输入说明内容",score:"2:1",type:"双方相同"},{

id:7,zbname:"日本赛区比赛",zbtime:"2011-1-23",zbrul1:"胜利",zbrul2:"失败",por:"请输入说明内容",score:"2:1",type:"支持红方"},{

id:8,zbname:"中亚赛区比赛",zbtime:"2013-12-15",zbrul1:"失败",zbrul2:"胜利",por:"请输入说明内容",score:"2:1",type:"支持蓝方"},{

id:9,zbname:"中亚赛区比赛",zbtime:"2015-10-17",zbrul1:"失败",zbrul2:"胜利",por:"请输入说明内容",score:"2:1",type:"支持红方"},{

id:10,zbname:"中亚赛区比赛",zbtime:"2015-11-21",zbrul1:"胜利",zbrul2:"胜利",por:"请输入说明内容",score:"2:1",type:"支持蓝方"},{

id:11,zbname:"中亚赛区比赛",zbtime:"2015-2-02",zbrul1:"失败",zbrul2:"失败",por:"请输入说明内容",score:"2:1",type:"支持红方"},{

id:12,zbname:"中亚赛区比赛",zbtime:"2015-2-05",zbrul1:"胜利",zbrul2:"失败",por:"请输入说明内容",score:"2:1",type:"双方相同"}];

$scopefun=function(){

var e=windowevent||arguments[0];

var src=esrcElement||etarget;

if(srcnodeName=="TD"){

var par=srcparentNode;

var sd=pargetElementsByTagName("td")[0];

if(sdfirstChildchecked==true){

sdfirstChildchecked=false;

}else{

$("tr td")attr("checked",false);

sdfirstChildchecked=true;

}

$scoperefresh=function(){//点击刷新按钮显示表格

$scopesaveDate=datalist;

// consolelog("结束赋予数据");

$scope$watch("saveDate",function(){//2016120监听列表生成数据，当发生变化时执行刷新列表

table_page();

$scopeisshow=true;

});

}

$scopesave=function(){//页面提交按钮

consolelog("准备保存");

consolelog($scopesaveDate);//只要数据改变，自动保存到原始数据列表中

}

//表格分页功能

function table_page(){

var show_page=5;//每页显示的条数

var page_all=$("#page")children()size();//总条数

var current_page=1;//当前页

// consolelog(page_all);

var page_num=Mathceil(page_all/show_page);//总页数

var current_num=0;//用于生成页标的计数器

var li="";//页标元素

while(page_num>current_num){//循环生成页标元素

li+='<li class="page_num"><a href="javasctip:(0)">'+(current_num+1)+'</a></li>';

current_num++;

}

$("#page_num_all")html(li);//添加页标到页面

$('#page tr')css('display', 'none');//设置隐藏

$('#page tr')slice(0, show_page)css('display', '');//设置显示

$("#current_page")html(" "+current_page+" ");//显示当前页

$("#page_all")html(" "+page_num+" ");//显示总页数

$("#previous")click(function(){//上一页

var new_page=parseInt($("#current_page")text())-1;

if(new_page>0){

$("#current_page")html(" "+new_page+" ");

tab_page(new_page);

}

});

$("#next")click(function(){//下一页

var new_page=parseInt($("#current_page")text())+1;//当前页标

if(new_page<=page_num){//判断是否为最后或第一页

$("#current_page")html(" "+new_page+" ");

tab_page(new_page);

}

});

$("page_num")click(function(){//页标跳转

var new_page=parseInt($(this)text());

tab_page(new_page);

});

function tab_page(index){//切换对应页标的页面

var start=(index-1)show_page;//开始截取的页标

var end=start+show_page;//截取个数

$('#page')children()css('display', 'none')slice(start, end)css('display', '');

current_page=index;

$("#current_page")html(" "+current_page+" ");

}

})directive('contenteditable', function() {//自定义ngModel的属性可以用在div等其他元素中

return {

restrict: 'A', // 作为属性使用

require: 'ngModel', // 此指令所代替的函数

link: function(scope, element, attrs, ngModel) {

if (!ngModel) {

return;

} // do nothing if no ng-model

// Specify how UI should be updated

ngModel$render = function() {

elementhtml(ngModel$viewValue || '');

};

// Listen for change events to enable binding

elementon('blur keyup change', function() {

scope$apply(readViewText);

});

// No need to initialize, AngularJS will initialize the text based on ng-model attribute

// Write data to the model

function readViewText() {

var html = elementhtml();

// When we clear the content editable the browser leaves a <br> behind

// If strip-br attribute is provided then we strip this out

if (attrsstripBr && html === '<br>') {

html = '';

}

ngModel$setViewValue(html);

}

};

})

</script>

直接上代码，一看就懂了：

<thead>

<tr>

</tr>

</thead>

<tbody>

</tr>

</tbody>

</table>

$index是从0开始计数的，所以，这里，我们+1

以上就是关于angularjs怎样不使用数据库修改表格里的数据全部的内容，包括:angularjs怎样不使用数据库修改表格里的数据、如何使用angularjs处理动态菜单、如何利用AngularJS动态创建表格和动态赋值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/sjk/9766374.html

angularjs怎样不使用数据库修改表格里的数据

发表评论

评论列表（0条）