Kendo Grid：将Edit button 移到grid view 得顶部
因为kendo grid 得toolbar 里不包括Edit button，所以我们要先用template 创建一个自定义得edit button，然后再对这个button实现edit 功能。
<script id="template" type="text/x-kendo-template">/'
<a class="k-button" href="javascript：void(0)" onclick="eidtbtn()">Edit</a>
</script>
然后再在 toolbar 里引用
toolbar: ["create", { template: kendo.template($("#template").html()) }],
然后是实现功能
function Editbtn(){
var cust_grid= $("#fmeagrid").data("kendoGrid");
var selectrow= cust_grid.items().index(cust_grid.select())+1;
cust_grid.editRow($("#fmeagrid tr:eq("+selectrow+")"));
}
注意：这里得"#fmeagrid” 是 grid 得id
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/editing-popup">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1028/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1028/styles/kendo.material.mobile.min.css" /> <script src="//kendo.cdn.telerik.com/2016.3.1028/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script id="template" type="text/x-kendo-template">
<a class="k-button" href="javascript:void(0)" onclick="Editbtn()">Edit</a>
</script>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
}); $("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create", { template: kendo.template($("#template").html()) }],
columns: [
{ field:"ProductName", title: "Product Name" },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px" },
],
editable: "popup",
selectable: "multiple row",
});
});
function Editbtn(){
var cust_grid= $("#grid").data("kendoGrid");
var selectrow= cust_grid.items().index(cust_grid.select())+1;
cust_grid.editRow($("#grid tr:eq("+selectrow+")"));
}
</script>
</div> </body>
</html>
demo:link http://dojo.telerik.com/OPola
function Deletebtn(){
if (confirm("Are you sure you want to delete these records?")) {
var cust_grid= $("#grid").data("kendoGrid")
var selectedrows = cust_grid.select();
cust_grid.dataSource.remove(cust_grid.dataItem(selectedrows));
}
}
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/editing-popup">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1028/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1028/styles/kendo.material.mobile.min.css" /> <script src="//kendo.cdn.telerik.com/2016.3.1028/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script id="template" type="text/x-kendo-template">
<a class="k-button" href="javascript:void(0)" onclick="Editbtn()">EDIT</a>
<a class="k-button" href="javascript:void(0)" onclick="Deletebtn()">DELETE</a>
</script>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
}); $("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create", { template: kendo.template($("#template").html()) }],
columns: [
{ field:"ProductName", title: "Product Name" },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px" },
],
editable: "popup",
selectable: "multiple row",
});
});
function Editbtn(){
var cust_grid= $("#grid").data("kendoGrid");
var selectrow= cust_grid.items().index(cust_grid.select())+1;
cust_grid.editRow($("#grid tr:eq("+selectrow+")"));
}
function Deletebtn(){
if (confirm("Are you sure you want to delete these records?")) {
var cust_grid= $("#grid").data("kendoGrid")
var selectedrows = cust_grid.select();
cust_grid.dataSource.remove(cust_grid.dataItem(selectedrows)); } }
</script>
</div> </body>
</html>
Kendo Grid：将Edit button 移到grid view 得顶部的更多相关文章
- kendo ui 好用的小部件--grid
Kendo Ui Grid控件,继承至Widget. https://demos.telerik.com/kendo-ui/grid/index 快速上手教程 下面的代码来自本教程 做表格时非常方 ...
- ExtJS扩展：扩展grid之toolbar button禁用表达式
在前一篇文章我们扩展了grid通过选中记录数来禁用toolbar上的按钮,有时候我们需要通过记录中的数据来决定是否禁用按钮,今天我们就来扩展它. 照例,最新的代码和例子都在gi ...
- dev 中 字符串转中文拼音缩写，对grid列表进行模糊匹配，grid获取焦点行，gridlookupedit控件用拼音模糊匹配下拉选项
番外篇:. //该方法是将字符串转化为中文拼音的首写字母大写, public static string RemoveSpecialCharacters(string str){try{if (str ...
- ubuntu 14.04 将窗体button移到右边
刚刚安装了Ubuntu 14.04,想改动窗体button的位置.但依照曾经的办法发现不行了,在gconftool-->apps中找不到metacity. 多方查找后找到解决方式,例如以下 Ub ...
- 在button中加入一个view图片
#import "ViewController.h" @interface ViewController () @end @implementation ViewControlle ...
- iOS开发之--在UIWindow上展示/移除一个View
代码如下: 展示 UIWindow *window = [[UIApplication sharedApplication].windows lastObject]; [window addSubvi ...
- [HTML]点击按钮，页面总是跳回顶端的解决方法(Clicking an button,always resets the view to top of page)
1 前言 当网页页面较长或者表单较多时,右侧会出现滚动条,然而经常会出现点击底部的<button>按钮或者<a>超链接,会出现点击后,当前页面会回到顶端. 2 方案 例如样例代 ...
- WPF整理-Style
"Consistency in a user interface is an important trait; there are many facets of consistency, ...
- WPF style 换肤
原文地址:http://www.cnblogs.com/DebugLZQ/p/3181040.html 原作者:DebugLZQ UI的风格一致性是应用程序应当关注的重要特性. 1.Creating ...
随机推荐
- 原生javascript自定义input[type=checkbox]效果
2018年6月27日 更新 能用css3,就不用js 用纯css3实现样式重写 <!DOCTYPE html> <html lang="en"> < ...
- win7系统日志分支删除方法
这篇日志有问题,自己亲身尝试失败,这里只提供思路,谢谢(改天突破再做修改) 之前电脑装过德国的叫啥子软件来着,当时在系统自动创建了日志,后来软件卸载了,发现还是有这个日志主键,(我有强迫症)心里不爽, ...
- == 和equal的区别？-005
1,== 和equal的区别? ==比较两个值是否相等,equal比较对对象的引用是否一致 举例: int a = 2; int b = 2; System.err.println(a == b);/ ...
- asp.netMVC中实现分页方法
方法一:使用传统的sql语句实现分页, public class UserprintDao如下 /// <summary> /// 取得用户申请记录列表(按分页) /// </ ...
- 【Python】python-内置常量
引言 Python的内置常量不多,只有6个,分别是True.False.None.NotImplemented.Ellipsis.__debug__ 一.True 1.True是bool类型用来表示的 ...
- 【数据库】Sql Server备份还原脚本
USE master RESTORE DATABASE 新建的没有任何数据的数据库名 FROM DISK = 'e:\数据库备份文件.bak' WITH MOVE '原来的逻辑名称' TO 'e:\新 ...
- Codeforces Round#516 Div.1 翻车记
A:开场懵逼.然后发现有人1min过,于是就sort了一下,于是就过了.正经证明的话,考虑回文串两端点一定是相同的,所以最多有Σcnti*(cnti+1)/2个,cnti为第i种字母出现次数.而sor ...
- BZOJ1059：[ZJOI2007]矩阵游戏——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=1059 https://www.luogu.org/problemnew/show/P1129 小Q是 ...
- Change the IPTables log file
http://www.networkinghowtos.com/howto/change-the-iptables-log-file/ An important aspect of any f ...
- C/C++中字符串与数字相互转换
数字转字符串: 用C++的streanstream: #include <sstream> #Include <string> string num2str(double i) ...