Angularjs中的IGGird创建和使用
AngularJs
Ignite 中的Iggrid 官网：http://www.igniteui.com/grid/angular
Angularjs的Iggrid使用有两种方式，第一种为iggrid官网介绍方式。第二种为Option方式，第二种方式和原有的js使用方式一样不做过多介绍，主要介绍第一种，下面做一一介绍。
Ig-grid方式：
id="grid1"
data-source="data"
data-source-type="json"
width="100%"
height="400px"
primary-key="ProductID"
auto-commit="true"
auto-generate-columns="false">
key="ProductID" header-text="ID" width="50px" data-type="number">
key="ProductName" header-text="Product Name" width="250px" data-type="string">
key="QuantityPerUnit" header-text="Units On Order" width="200px" data-type="string">
key="UnitsInStock" header-text="Unit Price" width="100px" data-type="number" template="{{getHtml('#colTmpl')}}">
name="Updating">
column-key="ProductID" read-only="true">
name="Paging" page-size="10">
name="Sorting">
以上示例为官网示例，可以查看官网，下面主要介绍使用方式，具体请自己按照以下使用方式使用：
http://www.igniteui.com/help/api/2016.2/ui.igGrid 为igGrid API。API主要分Overview/Options/Events/Methods/Theming，下面主要介绍Options/Events。
1/Options：主要介绍igGrid中的方法，它的主要使用方式是将方法追加到ig-grid标签后，以features为例，如图：
一律追加在其后，然后根据方法里面的使用方式一一添加自己的意向。
再举例添加tooltips，根据官网tooltips使用方法，在features下添加新标记：
<feature name="Tooltips" visibility="always" show-delay="1000" hide-delay="500">
<column-settings>
<column-setting column-key="key" allow-tooltips="true">column-setting>
feature>
如果我们要添加Events事件，则需要直接写成ig-grid的属性，比如：dataRendered事件，就是在Grid加载完后对Gird的处理，这时，我们的添加方式就是在上图的auto-generate-columns后添加事件：event-data-rendered=‘调用事件方法’即可。方法事件名称组成方式，第一个event是因为在API中这是一个事件，所以添加event，data-redered的写法是因为这个事件的名称为dataRendered。这个和angularjs中引用组件有关系，所有大写字母改小写，并在前面加“-”。不懂得孩子，请自行到Angularjs官网查询自定义指令的使用方式
2/Option方式和原生js方式一样，呈现示例即可，不做过多解释：
this.CompGridNew = {
columns: [
{ headerText: "AAAA", key: "BrEntityNameCh", dataType: "string", width: "20%", template: "${BrEntityNameCh}"},
],
autoGenerateColumns: false,
autoGenerateLayouts: false,
renderCheckboxes: true,
enableUTCDates: true,
adjustVirtualHeights: false,
autofitLastColumn: true,
dataSource: $this.basicInfo,//此为数据源
width: "100%",
responseDataKey: "Recode_No",
dataRendered: function (evt, ui) {
//$this.$compile(ui.owner.element)($this.$scope);
},
generateCompactJSONResponse: false,
features: [
{
name: "Sorting",
type: "local"
},
{
name: "Filtering",
type: "local",
mode: "simple"
},
{
name: 'Paging',
type: "local",
pageSize: 50,
showPageSizeDropDown: false
},
{
name: "Selection",
multipleSelection: true,
multipleCellSelectOnClick: true,
mode: "row",
skipChildren: true
},
{
name: "RowSelectors",
enableCheckBoxes: true,
enableSelectAllForPaging: true,
requireSelection: true,
enableRowNumbering: false,
rowSelectorColumnWidth: 42,
checkBoxStateChanged: function (evt, ui) {
//console.log(ui);
//获取当前checkbox的状态
//var checkStatus = ui.state;
//获取pk的值
//var recodeNo = ui.rowSelector[0].nextSibling.innerText;
//if (checkStatus == "on") {
// $this.checkedList[recodeNo] = recodeNo;
//}
//if (checkStatus == "off") {
// delete $this.checkedList[recodeNo];
//}
}
},
{
name: "Tooltips",
columnSettings: [
{ columnKey: "key", allowTooltips: true },
],
visibility: "always",
showDelay: 1000,
hideDelay: 500
}
]
};
界面使用：<div ig-grid="vm.CompGridNew" id="newGrid">div>请注意“CompGridNew”。这个是在后台对ig-gird操作的最重要属性。在这里有一个重要点就是:在后台添加点击事件，ng-click不会被认为是一个时间，会被认为是一个标记，所以点击事件使用了js的方式，没有使用angularjs的方式，这个是和第一种方式的一大区别。至于为什么，这个和angularjs的机制有关系，请自行查阅相关典籍
在angularjs中通过ts编写时，如何添加中英文转换
第一步，在使用界面（html中）注册: @section scripts
{
<script type="text/javascript">
angular.module("app")
.factory("注册的名称", function () {
return {
ID: '@资源文件名.ID',
};
})
script>
}
在后台引用：
constructor(private注册的名称: any) {
使用：this.注册的名称.ID//调试时，可以看到“注册的名称”里面包含所有界面return的所有字段
}
注意：“注册的名称”需唯一，并且是在使用界面注册，也可以在母版页中注册。如果提示找不到或者未发现，一般为注册的名字重复，或者引用方式错误