Javascript 淘汰GridView如何删除行？
这是我的HTLM页面：Javascript 淘汰GridView如何删除行？,javascript,arrays,gridview,knockout.js,Javascript,Arrays,Gridview,Knockout.js,这是我的HTLM页面： <!DOCTYPE html> <script src="Scripts/knockout-3.4.2.js" type="text/javascript"></script> <script src="Scripts/jquery-3.1.1.min.js"></script> <script src="Scripts/knockout.simpleGrid.js"></script>
<!DOCTYPE html>
<script src="Scripts/knockout-3.4.2.js" type="text/javascript"></script>
<script src="Scripts/jquery-3.1.1.min.js"></script>
<script src="Scripts/knockout.simpleGrid.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Knockout GridView Örnek</title>
<style>
body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; }
.ko-grid { margin-bottom: 1em; width: 25em; border: 1px solid silver; background-color:White; }
.ko-grid th { text-align:left; background-color: Black; color:White; }
.ko-grid td, th { padding: 0.4em; }
.ko-grid tr:nth-child(odd) { background-color: #DDD; }
.ko-grid-pageLinks { margin-bottom: 1em; }
.ko-grid-pageLinks a { padding: 0.5em; }
.ko-grid-pageLinks a.selected { background-color: Black; color: White; }
.liveExample { height:20em; overflow:auto }
li { list-style-type: disc; margin-left: 20px; }
</style>
</head>
<body>
<div data-bind='simpleGrid: gridViewModel'></div>
<div>Ad: </div> <input data-bind="value: Ad" /> <br />
<div>Satılan: </div> <input data-bind="value: Satis" /> <br />
<div>Fiyat: </div> <input data-bind="value: tutar" /> <br />
<button data-bind='click: addItem'>
Add item
</button>
<button data-bind='click: deleteFirst'>Delete first Row</button>
<button data-bind='click: deleteLast'>Delete Last Row</button>
<button data-bind='click: sortByName'>
Sort by name
</button>
<button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
Jump to first page
</button>
</body>
</html>
击倒GridViewÖrnek
正文{字体系列：arial；字体大小：14px；}
.liveExample{填充：1em；背景色：#eeedd；边框：1px实心#CCC；最大宽度：655px；}
.liveExample输入{font-family:Arial；}
.liveExample b{font-weight:bold；}
.liveExample p{页边距顶部：0.9em；页边距底部：0.9em；}
.liveExample选择[多个]{宽度：100%；高度：8em；}
.liveExample h2{页边空白顶部：0.4em；}
.ko网格{边距底部：1em；宽度：25em；边框：1px纯银；背景色：白色；}
.ko网格th{文本对齐：左；背景色：黑色；颜色：白色；}
.ko网格td，th{padding:0.4em；}
.ko grid tr:nth child（奇数）{背景色：#DDD；}
.ko网格页面链接{页边距底部：1em；}
.ko网格页面链接a{padding:0.5em；}
.ko网格页面链接a.所选{背景色：黑色；颜色：白色；}
.liveExample{高度：20em；溢出：自动}
li{列表样式类型：光盘；左边距：20px；}
广告：
萨特兰：
菲亚特：
添加项
删除第一行
删除最后一行
按名称排序
跳转到第一页
<script type="text/javascript">
var initialData = [
{ name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
{ name: "Speedy Coyote", sales: 89, price: 190.00 },
{ name: "Furious Lizard", sales: 152, price: 25.00 },
{ name: "Indifferent Monkey", sales: 1, price: 99.95 },
{ name: "Brooding Dragon", sales: 0, price: 6350 },
{ name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
{ name: "Optimistic Snail", sales: 420, price: 1.50 }
];
var PagedGridModel = function (items) {
this.items = ko.observableArray(items);
this.sortByName = function () {
this.items.sort(function (a, b) {
return a.name < b.name ? -1 : 1;
});
};
this.jumpToFirstPage = function () {
this.gridViewModel.currentPageIndex(0);
};
this.deleteFirst = function () {
this.items.shift();
}
this.deleteLast = function () {
this.items.pop();
}
this.removeGift = function (item) {
this.initialData.remove(item);
};
this.gridViewModel = new ko.simpleGrid.viewModel({
data: this.items,
columns: [
{ headerText: "Item Name", rowText: "name" },
{ headerText: "Sales Count", rowText: "sales" },
{ headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
],
pageSize: 4
});
this.Ad = ko.observable("");
this.Satis = ko.observable("");
this.tutar = ko.observable("");
this.addItem = function () {
if (this.Ad() != "" && this.Satis() != "" && this.tutar() != "") {
this.tutar(Number(this.tutar()));
this.Satis(Number(this.Satis()));
this.items.push({ name: this.Ad(), sales: this.Satis(), price: this.tutar() });
this.Ad("");
this.Satis("");
this.tutar("");
}
}.bind(this);
};
ko.applyBindings(new PagedGridModel(initialData));
</script>
var initialData=[
{名称：“旅行频繁的小猫”，销售：352只，价格：75.95}，
{名称：“快速郊狼”，销售额：89，价格：190.00}，
{名称：“愤怒的蜥蜴”，销售：152，价格：25.00}，
{名称：“无动于衷的猴子”，销售额：1，价格：99.95}，
{名称：“孵龙”，销售额：0，价格：6350}，
{名称：“独创蝌蚪”，销售：39450，价格：0.35}，
{名称：“乐观蜗牛”，销售：420，价格：1.50}
];
var PagedGridModel=功能（项目）{
this.items=ko.observearray（项目）；
this.sortByName=函数（）{
this.items.sort（函数（a，b）{
返回a.name(function () {
// Private function
function getColumnsForScaffolding(data) {
if ((typeof data.length !== 'number') || data.length === 0) {
return [];
}
var columns = [];
for (var propertyName in data[0]) {
columns.push({ headerText: propertyName, rowText: propertyName });
}
return columns;
}
ko.simpleGrid = {
// Defines a view model class you can use to populate a grid
viewModel: function (configuration) {
this.data = configuration.data;
this.currentPageIndex = ko.observable(0);
this.pageSize = configuration.pageSize || 5;
// If you don't specify columns configuration, we'll use scaffolding
this.columns = configuration.columns || getColumnsForScaffolding(ko.unwrap(this.data));
this.itemsOnCurrentPage = ko.computed(function () {
var startIndex = this.pageSize * this.currentPageIndex();
return ko.unwrap(this.data).slice(startIndex, startIndex + this.pageSize);
}, this);
this.maxPageIndex = ko.computed(function () {
return Math.ceil(ko.unwrap(this.data).length / this.pageSize) - 1;
}, this);
}
};
// Templates used to render the grid
var templateEngine = new ko.nativeTemplateEngine();
templateEngine.addTemplate = function (templateName, templateMarkup) {
document.write("<script type='text/html' id='" + templateName + "'>" + templateMarkup + "<" + "/script>");
};
templateEngine.addTemplate("ko_simpleGrid_grid", "\
<table class=\"ko-grid\" cellspacing=\"0\">\
<thead>\
<tr data-bind=\"foreach: columns\">\
<th data-bind=\"text: headerText\"></th>\
</tr>\
</thead>\
<tbody data-bind=\"foreach: itemsOnCurrentPage\">\
<tr data-bind=\"foreach: $parent.columns\">\
<td data-bind=\"text: typeof rowText == 'function' ? rowText($parent) : $parent[rowText] \"></td>\
<td><a href=\"#\" data-bind=\"click: $root.removeGift\">Delete</a></td>\
</tr>\
</tbody>\
</table>");
templateEngine.addTemplate("ko_simpleGrid_pageLinks", "\
<div class=\"ko-grid-pageLinks\">\
<span>Page:</span>\
<!-- ko foreach: ko.utils.range(0, maxPageIndex) -->\
<a href=\"#\" data-bind=\"text: $data + 1, click: function() { $root.currentPageIndex($data) }, css: { selected: $data == $root.currentPageIndex() }\">\
</a>\
<!-- /ko -->\
</div>");
// The "simpleGrid" binding
ko.bindingHandlers.simpleGrid = {
init: function () {
return { 'controlsDescendantBindings': true };
},
// This method is called to initialize the node, and will also be called again if you change what the grid is bound to
update: function (element, viewModelAccessor, allBindings) {
var viewModel = viewModelAccessor();
// Empty the element
while (element.firstChild)
ko.removeNode(element.firstChild);
// Allow the default templates to be overridden
var gridTemplateName = allBindings.get('simpleGridTemplate') || "ko_simpleGrid_grid",
pageLinksTemplateName = allBindings.get('simpleGridPagerTemplate') || "ko_simpleGrid_pageLinks";
// Render the main grid
var gridContainer = element.appendChild(document.createElement("DIV"));
ko.renderTemplate(gridTemplateName, viewModel, { templateEngine: templateEngine }, gridContainer, "replaceNode");
// Render the page links
var pageLinksContainer = element.appendChild(document.createElement("DIV"));
ko.renderTemplate(pageLinksTemplateName, viewModel, { templateEngine: templateEngine }, pageLinksContainer, "replaceNode");
}
};
})();
（函数（）{
//私人职能
函数GetColumnsForsCafolding（数据）{
if（（typeof data.length！='number'）| | data.length==0）{
返回[]；
}
var列=[]；
对于（数据[0]中的var propertyName）{
push（{headerText:propertyName，rowText:propertyName}）；
}
返回列；
}
ko.simpleGrid={
//定义可用于填充网格的视图模型类
视图模型：功能（配置）{
this.data=configuration.data；
this.currentPageIndex=ko.可观察（0）；
this.pageSize=configuration.pageSize | | 5；
//如果您不指定列配置，我们将使用脚手架
this.columns=configuration.columns | | getcolumnsforscafolding（ko.unwrap（this.data））；
this.itemsOnCurrentPage=ko.computed（函数（）{
var startIndex=this.pageSize*this.currentPageIndex（）；
返回ko.unwrap（this.data）.slice（startIndex，startIndex+this.pageSize）；
}，这个）；
this.maxPageIndex=ko.computed（函数（）{
返回Math.ceil（ko.unwrap（this.data）.length/this.pageSize）-1；
}，这个）；
}
};
//用于渲染网格的模板
var templateEngine=new ko.nativeTemplateEngine（）；
templateEngine.addTemplate=函数（templateName、templateMarkup）{
document.write（“+templateMarkup+”）；
};
addTemplate（“ko_simpleGrid_grid”\
\
\
\
\
\
\
\
\
\
\
\
\
");
addTemplate（“ko_simpleGrid_pageLinks”\
\
第页：\
\
\
\
");
//“simpleGrid”绑定
ko.bindingHandlers.simpleGrid={
init：函数（）{
返回{'ControlsDescentBindings'：true}；
},
//调用此方法以初始化节点，如果更改gr的内容，也将再次调用此方法