AngularJs GridView批量编辑_批量修改AngularJs GridView
2014-10-19 16:06:32  By: dwtedx

在GridView控件中编辑数据是常见的场景之一、现在随着2路数据绑定AngularJs的功能

它变得非常容易地编写代码、本文为您提供关于如何在GridView控件实现批量编辑、只需几行代码多种方法

我也考虑到Demo后台的数据更新、网格数据使用的WebAPI服务器、以便将其保存到数据库中

在看本文之后你需要先了解AngularJs的基本知识哦、当然你也可以边看边了解

以下是基本的批量编辑应用程序的截图

批量修改AngularJs GridView

第1步

从服务器获取数据很容易、你可以简单地使用HTTP资源和检索的数据分配给你的表格


第2步

AngularJs和HTML创建表格是很容易的、只需创建该表的元素和重复填充每一行的元素

如果您不希望使用的表格、可以选择其他模板、Model数据被直接绑定到HTML控件

<table id="employeeEditTable" class="table table-bordered batch-edit">
<colgroup>
	<col width="60" />
	<col width="140" />
	<col width="300" />
	<col width="100" />
	<col width="100" />
	<col width="100" />
</colgroup>
<tr>
	<th>S. No.</th>
	<th>Name</th>
	<th>Address</th>
	<th>Date of Birth</th>
	<th>Salary</th>
	<th>Country</th>
</tr>
<tr ng-repeat="employee in employees">
	<td>{{$index + 1}}.</td>
	<td><input type="text" ng-model="employee.Name" /></td>
	<td><input type="text" ng-model="employee.Address" /></td>
	<td>
		<input type="text" ng-model="employee.BirthDate" 
			name="date" bs-datepicker />
	</td>
	<td class="text-right">
		<input type="number" class="text-right" 
			ng-model="employee.Salary" />
	</td>
	<td>
		<select ng-options="c.Name for c in countries" 
		ng-model="employee.Country" ng-init="setDropDown(employee);"
		ng-change="employee.CountryId = employee.Country.Id"></select>
	</td>
</tr>
</table>
显示控制:ng-show="!employee.edit.Name"
编辑控制:ng-show="employee.edit.Name"


第3步

当数据中的HTML控制改变时、模型自动更新、所以、在这个步骤中、您不必担心controls数据更新

好了、通过这三个步骤就要以实现批量编辑AngularJs GridView的批量编辑了

下面是源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1eQiqJa6 密码: 8kk7

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


猜你喜欢的

快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+