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 ...
随机推荐
- ubuntu搭建eclipse+svn
最近工作中要求使用ubuntu系统进行开发,小编第一次使用,将搭建环境的过程中一点点经验分享给大家.ubuntu的使用跟linux差不太多,大多数命令还是一样的.不过界面要好看很多,O(∩_∩)O哈哈 ...
- MapperScannerConfigurer的原理
原文地址:http://www.mybatis.org/spring/zh/mappers.html#MapperScannerConfigurer 为了代替手工使用 SqlSessionDaoSup ...
- Hibernate使用详解（一）
一.前言 这些天都在为公司框架重构做准备,浏览了一下代码,挑了几个不熟或者没接触过的知识点进行攻坚,hibernate是其中之一.其实接触hibernate是在大学期间,应该是在2012年,已经201 ...
- 【nginx】nginx：利用负载均衡原理实现代码的热部署和灰度发布
事情起因很简单,代码的改动量很大.而且刚接手服务器,对原有的代码进行了一定程度的重构.虽然在测试服务器上做了较多的测试工作,但是直接将代码送入生产环境还是不放心,万一配置出问题服务直接崩溃怎么解?万一 ...
- VS2012完全卸载
1.先交VS2012的ISO通过Ultraiso载入2.DOS命中输入 I:\vs_ultimate.exe /uninstall /force 或 I:vs_ultimate.exe /uninst ...
- 关于Axure RP
Axure RP 是一款专业的原型设计工具 用于快速创建应用软件的线框图.流程图.原型和规格说明文档 贴一张图
- matlab exist函数
函数作用:用于确定某变量或值是否存在. 调用格式: exist主要有两种形式,一个参数和两个参数的,作用都是用于确定某值是否存在:1. b = exist( a) 若 a 存在,则 b = 1: 否则 ...
- CF17E：Palisection——题解
https://vjudge.net/problem/CodeForces-17E http://codeforces.com/problemset/problem/17/E 题目大意:给一个长度为n ...
- Linux实验一
一.Linux 简介 1.Linux 就是一个操作系统,就像你多少已经了解的 Windows(xp,7,8)和 Max OS , 我们的 Linux 也就是系统调用和内核那两层,当然直观的来看,我们使 ...
- React的getDefaultProps和getInitialState
getDefaultProps 不是获取默认props,而是设置默认props,主要用在ES5的React写法中getInitialState 不是获取默认State,而是设置初始的state,主要是 ...