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 ...
随机推荐
- 移动端的picker参考vux
参考vux移动端的ui组件,做了一个picker,测试在微信,uc主流浏览器能够正常工作.而在华为浏览器根本不能使用.而测试了vux的原有picker组件,发现在华为自带浏览器中,效果依然能够实现. ...
- python爬虫 --- 简书评论
某些网站的一些数据是通过js加载的 ,所以爬取下来的数据拿不到, 找到评论的地址 .进行请求获取评论数据 #coding=utf-8 import json import requests def r ...
- 含html转义字符编码(四)转换--python
在抓取下来的网页源码显示的是如下的内容,而不是可读性的汉字 (当然,如果是在Web页面上展示,则实体会自动被浏览器转为原字符,正常显示) 经查资料后得知, 在网页中以四开头的是HTML实体,具体什么是 ...
- [Leetcode] 1.Two Sum（unordered_map）
1.首先想到的方法就是两个for循环全部遍历,代码如下,可通过,但效率太低 class Solution { public: vector<int> twoSum(vector<in ...
- BZOJ4289 PA2012Tax（最短路）
一个暴力的做法是把边看成点,之间的边权为两边的较大权值,最短路即可.但这样显然会被菊花图之类的卡掉. 考虑优化建图.将边拆成两个有向边,同样化边为点.原图中同一条边在新图中的两个点之间连边权为原边权的 ...
- JavaScript-序列化及转义
1. for循环: while循环: 2. 条件语句: 类似于if else的功能. name='1'; switch(name){ case:'1': console.log(123); brea ...
- Unable to open connection to "Microsoft SQL Server, provider V1.0.5000.0 in framework
解决办法:1 以管理员身份登陆2 找到ORACLE_HOME文件夹(D:\oracle\ora92),点右键,选属性——安全,在组或用户栏中选"Authenticated Users&quo ...
- [洛谷P4847]银河英雄传说V2
题目大意:有$n(n\leqslant2\times10^5)$个序列,有$m(m\leqslant2\times10^5)$个操作,分三种: 1. $M\;x\;y:$把$x$所在的序列放在$y$所 ...
- [SDOI2014][BZOJ3533] 向量集 [线段树+凸包]
题面 BZOJ传送门 思路 首先当然是推式子 对于一个询问点$(x_0,y_0$和给定向量$(x_1,y_1)$来说,点积这么表达: $A=x_0x_1+y_0y_1$ 首先肯定是考虑大小关系:$x_ ...
- PCA误差
我们知道,PCA是用于对数据做降维的,我们一般用PCA把m维的数据降到k维(k < m). 那么问题来了,k取值多少才合适呢? PCA误差 PCA的原理是,为了将数据从n维降低到k维,需要找到k ...