Javascript 剑道网格单独弹出窗口标题和;用于创建和编辑的按钮;编辑
我想根据可编辑弹出窗口是否用于创建或编辑网格项来更改其标题(不过,我希望两个窗口的字段相同) 我已将弹出窗口的标题设置为Javascript 剑道网格单独弹出窗口标题和;用于创建和编辑的按钮;编辑,javascript,jquery,kendo-ui,kendo-grid,Javascript,Jquery,Kendo Ui,Kendo Grid,我想根据可编辑弹出窗口是否用于创建或编辑网格项来更改其标题(不过,我希望两个窗口的字段相同) 我已将弹出窗口的标题设置为editable editable: { mode: "popup", template: kendo.template($("#popupTemplate").html()), window: { title: "Add" }
editable
editable: {
mode: "popup",
template: kendo.template($("#popupTemplate").html()),
window: {
title: "Add"
}
}
但我不知道如何区分编辑和添加。“编辑”按钮位于以下列中:
command: [
{
name: "edit",
text: {
edit: "Edit",
update: "Save",
cancel: "Cancel"
}
}
]
以及工具栏中的“添加”按钮:
toolbar: [{name: 'create'}]
值得注意的是,我尝试过这一点,但没有任何效果:
toolbar: [
{
name: 'create',
click: function(){
alert("test");
}
},
]
我还看到了edit
下使用的e.model.isNew()
,但根据我的编译器,这不是一个函数
我在互联网和Telerik上到处找了找,什么也没找到。我错过什么了吗
编辑:有人要求提供我的全部网格代码:
var grid = $('#grid').kendoGrid({
//dataSource: this.source,
dataSource: this.testData,
height: 550,
filterable: true,
sortable: true,
pageable: {
pageSize: 30,
buttonCount: 1
},
//toolbar: ["create", "destroy", "search"],
toolbar: [
{name: 'create'},
{name: 'destroy'},
{name: 'search'},
{template: "<input id='category' type='search' style='width: 250px; float: right;'/>"}
],
resizeable: true,
columns: [
{
field: 'Name',
title: 'Name',
filterable: true,
},
{
field: 'MCN',
title: 'P/N',
filterable: false,
},
{
field: 'ID',
title: 'ID',
filterable: true,
},
{
field: 'Type',
title: 'Type',
filterable: true,
},
{
field: 'Subtype',
title: 'Subtype',
filterable: true,
},
{
field: 'Value',
title: 'Value',
filterable: false,
},
{
field: 'Tolerance',
title: 'Tolerance',
filterable: true, //Number/letter combination causes problem?
},
{
command: [
{
name: "edit",
text: {
edit: "Edit",
update: "Save",
cancel: "Cancel"
}
},
{
name: "copy",
text: "Copy",
//click: function
}
],
title: " ", width: "250px"
},
],
editable: {
mode: "popup",
template: kendo.template($("#popupTemplate").html()),
// window: {
// title: "Add"
// }
},
selectable: "multiple, row", // Select multiples by drag or Shift-Click
edit: function(e){
var container = e.container;
var model = e.model;
//console.log(model.get("ID"));
// Changing the size of the container
$(e.container).parent().css({
//width: "1000px",
//height: "500px"
});
//May be able to simplify this with a for loop
// Changing Type input to a dropdown
var input = $('#dropType');
input.kendoDropDownList({
dataTextField: "Type",
dataValueField: "dropType",
dataSource: [{Type: 'One'}, {Type: 'Two'}, {Type: 'Three'}],
}).appendTo(container);
// Changing Subtype input into a dropdown
var input = $('#dropSubtype');
input.kendoDropDownList({
dataTextField: "Subtype",
dataValueField: "dropSubtype",
dataSource: [{Subtype: 'One'}, {Subtype: 'Two'}, {Subtype: 'Three'}],
}).appendTo(container);
}
});
var grid=$(“#grid”).kendoGrid({
//数据源:this.source,
数据源:this.testData,
身高:550,
可过滤:正确,
可排序:是的,
可分页:{
页面大小:30,
按钮计数:1
},
//工具栏:[“创建”、“销毁”、“搜索”],
工具栏:[
{name:'创建'},
{name:'destroy'},
{name:'搜索'},
{模板:}
],
可调整大小:正确,
栏目:[
{
字段:“名称”,
标题:“姓名”,
可过滤:正确,
},
{
字段:“MCN”,
标题:“P/N”,
可过滤:false,
},
{
字段:“ID”,
标题:“ID”,
可过滤:正确,
},
{
字段:“类型”,
标题:“类型”,
可过滤:正确,
},
{
字段:“子类型”,
标题:“子类型”,
可过滤:正确,
},
{
字段:“值”,
标题:“价值”,
可过滤:false,
},
{
字段:'公差',
标题:“宽容”,
filterable:true,//数字/字母组合导致问题?
},
{
命令:[
{
名称:“编辑”,
正文:{
编辑:“编辑”,
更新:“保存”,
取消:“取消”
}
},
{
名称:“副本”,
文本:“复制”,
//单击:函数
}
],
标题:,宽度:250px
},
],
可编辑:{
模式:“弹出”,
模板:kendo.template($(“#popupTemplate”).html(),
//窗口:{
//标题:“添加”
// }
},
可选:“多个,行”,//通过拖动或按住Shift键单击选择多个
编辑:功能(e){
var-container=e.container;
var模型=e.model;
//log(model.get(“ID”);
//更改容器的大小
$(e.container).parent().css({
//宽度:“1000px”,
//高度:“500px”
});
//可以通过for循环来简化这一点
//将类型输入更改为下拉列表
变量输入=$(“#dropType”);
input.kendoDropDownList({
dataTextField:“类型”,
dataValueField:“dropType”,
数据源:[{Type:'One'},{Type:'Two'},{Type:'Three'}],
}).附在(容器)上;
//将子类型输入更改为下拉列表
变量输入=$(“#dropSubtype”);
input.kendoDropDownList({
dataTextField:“子类型”,
dataValueField:“dropSubtype”,
数据源:[{Subtype:'One'},{Subtype:'Two'},{Subtype:'Three'}],
}).附在(容器)上;
}
});
要更改标题
,应使用网格的编辑功能,如下所示:
$(“#网格”).kendoGrid({
数据源:{…},
身高:550,
工具栏:[“创建”],
栏目:[
{
字段:“”,
标题:“”,
属性:{style:“文本对齐:居中;”},
HeaderAttribute:{style:“文本对齐:居中;”}
},
{
命令:[
{名称:“编辑”,文本:“编辑”},
],
标题:“工具”,
宽度:“200px”,
属性:{style:“文本对齐:居中;”},
HeaderAttribute:{style:“文本对齐:居中;”}
}
],
可编辑:{
模式:“弹出”,
模板:$(“#模板”).html(),
},
编辑:功能(e){
如果(e.model.isNew()){
e、 容器。kendoWindow(“所有权”、“受造人”);
}否则{
e、 容器。kendoWindow(“标题”、“更新”);
}
}
});
有关模板的使用,请参见以下答案:
编辑:
据剑道说:
isNew
方法根据该模型的id
值返回true
或false
。
如果id
仍设置为默认值,则它将假定它是新型号
因此,我认为您的问题是由于您的数据源
,您应该在字段
属性之前填写id
。像这样:
dataSource: {
transport: {
read: {
url: ...
type: "POST", // The request type.
dataType: "json", // The data type of the returned result.
},
create: {...},
update: {...},
destroy: {...}
},
schema: {
model: {
id: "Id",
fields: {
Id: { editable: false },
BankName: { type: "string", validation: { required: true } },
....
}
}
},
pageSize: 20
},
这里有两个示例:(,)要更改标题
,您应该使用网格的编辑
功能,如下所示:
$(“#网格”).kendoGrid({
数据源:{…},
身高:550,
工具栏:[“创建”],
栏目:[
{
字段:“”,
标题:“”,
属性:{style:“文本对齐:居中;”},
HeaderAttribute:{style:“文本对齐:居中;”}
},
{
命令:[
{名称:“编辑”,文本:“编辑”},
],
标题:“工具”,
宽度:“200px”,
属性:{style:“文本对齐:居中;”},
HeaderAttribute:{style:“文本对齐:居中;”}
}
],
可编辑:{
模式:“弹出”,
模板:$(“#模板”).html(),
},
编辑:功能(e){
如果(e.model.isNew()){
e、 容器。kendoWindow(“所有权”、“受造人”);
}否则{
e、 容器。kendoWindow(“标题”、“更新”);
}
}
});
有关模板的使用,请参见以下答案:
编辑:
据肯说