Kendo UI:Grid

其他 2021-03-03 23:30:33 阅读次数: 0

Kendo.ui.Grid

Kendo Ui Grid控件，继承至Widget。

一、构造

      allowCopy    Boolen|Object  (默认：false)

     当他设置true，用户就可以选中行点击复制，可以复制进入excel和记事本。

    设置Object可以设置高级Copy，比如复制后通过分隔符隔开。    

<div id="grid"></div>
 <script> 
$("#grid").kendoGrid({ 
    selectable: "multiple cell", 
    allowCopy: true, 
    columns: [ 
                { field: "productName" }, 
                { field: "category" } 
             ], 
    dataSource: [ 
                { productName: "Tea", category: "Beverages" }, 
                { productName: "Coffee", category: "Beverages" },
                 { productName: "Ham", category: "Food" },        
                 { productName: "Bread", category: "Food" } 
] 
}); 
</script>

 allowCopy.delimeter  String|Object(默认："\t")

  delimeter是同一行，项与项之间的分隔符。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    selectable: "multiple cell",
    allowCopy: {
        delimeter: ",",
    },
    columns: [
        { field: "productName" },
        { field: "category" }
    ],
    dataSource: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" }
    ]
});
</script>

    altRowTemplate   String|Function

    呈现行的模板。默认不同行之间通过<tr>

    通过这个属性，可以自定义展示模板。支持kendo.template(html)和纯html。

    例子：指定交互行模板通过Funtion    

<div id="grid"></div>
<script id="alt-template" type="text/x-kendo-template"> 
    <tr data-uid="#= uid #"> 
        <td colspan="2"> 
            <strong>#: name #</strong> 
            <strong>#: age #</strong> 
        </td> 
    </tr> 
</script> 
<script> 
$("#grid").kendoGrid({
     dataSource: [ 
                    { name: "Jane Doe", age: 30 }, 
                    { name: "John Doe", age: 33 } 
                 ], 
     altRowTemplate: kendo.template($("#alt-template").html()) 
}); 
</script>

 例子：指定交互行模板通过String

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  dataSource: [ { name: "Jane Doe", age: 30 }, { name: "John Doe", age: 33 } ],
  altRowTemplate: '<tr data-uid="#= uid #"><td colspan="2"><strong>#: name #</strong><strong>#: age #</strong></td></tr>'
});
</script>

    autoBind  Boolean（default：true）

    当他设置成false，Grid在初始化的时候将不绑定，必须调用read()方法才能被绑定。

    个人理解：这样就完全将数据和展示分离开。

<div id="grid"></div> <script> var dataSource = new kendo.data.DataSource({ data: [ { name: "Jane Doe" }, { name: "John Doe" }] }); $("#grid").kendoGrid({ autoBind: false, dataSource: dataSource }); dataSource.read(); // "read()" will fire the "change" event of the dataSource and the widget will be bound </script>

     columnResizeHandleWidth  Number（default：3）

     定义每次句柄处理的宽度。让人更容易调整宽度。

      存在疑问：未启用

<div id="grid"></div> <script> $("#grid").kendoGrid({ columnResizeHandleWidth: 6 }); </script>

      columns  Array

      列配置模型。一个array对象或者string。javascript对象解释一个列配置。String指定绑定列名绑定的列。grid会根据列配置创建列。

      dataSource    Object|Array|kendo.data.DataSource

      dataSource是用于展示table rows。一个javascript对象要符合source config配置的对象，也可以是一个javascript array或者一个已经存在的kendo,data.DataSource 实例。

      当datasource 配置是一个javascript 对象或者一个kendo.data.DataSourece实例，使用它的value配合datasource  配置。

      当datasource配置是一个kendo.data.DataSource 实例。

    例子—指定Grid  Columns  通过 string array

<div id="grid"></div> <script> $("#grid").kendoGrid({ columns: ["name", "age"], // two columns bound to the "name" and "age" fields dataSource: [ { name: "Jane", age: 31 }, { name: "John", age: 33 }] }); </script>

 例子-指定grid列配置通过Object array

<div id="grid"></div> <script> $("#grid").kendoGrid({ columns: [{ field: "name",// create a column bound to the "name" field title: "Name" // set its title to "Name" }, { field: "age",// create a column bound to the "age" field title: "Age" // set its title to "Age" }], dataSource: [ { name: "Jane", age: 30 }, { name: "John", age: 33 }] }); </script>

 columnMenu   Boolean | Object(default:false)

 当设置成true，通过点击列投的图标Grid将显示列菜单。列菜单允许用户控制显示或者关闭列，过滤和排序（当过滤和排序被允许）。默认情况列菜单不被允许。

 通过设置一个Javascript 对象来设置column menu的配置。

 例子—启用Column Menu

<div id="grid"></div> <script> $("#grid").kendoGrid({ columns: [ { field: "name" }, { field: "age" } ], columnMenu: true, dataSource: [ { name: "Jane Doe", age: 30 }, { name: "John Doe", age: 33 } ] }); </script>

columnMenu的配置#Start-------------------------------------------------------------------------------------------------------------------------------------

columnMenu.columns  Boolean(default:true)

当设置成true，column menu 允许用户选择列显示隐藏。默认column menu 允许列选择。

例子—不允许列选择

$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  columnMenu: {
    columns: false
  },
  sortable: true,
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});

columnMenu.filterable  Boolean(default:true)

当它设置成true，列菜单允许用户过滤grid。当grid的配置filterable。

columnMenu.filterable的属性一定要再grid的filterable为true的前提才有用。

 例子—使得列过滤器无效$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
columnMenu: {
filterable: false
},
filterable: true,
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});

columnMenu.sortable  

当设置为true，允许用户通过grid列进行排序。默认情况下当grid的sortable为true时就可以设置。

例子—让column menu 排序不可用。

$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  columnMenu: {
    sortable: false
  },
  sortable: true,
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});

columnMenu.message  -Object

这个text message 显示在列菜单。使用自定义或本地，列菜单消息。

这个主要自定义列菜单的提示文字。

message是一个对象，里面包括columns,filter,sortAscending,sortDescending

例子—自定义列菜单消息<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
columnMenu: {
messages: {
columns: "Choose columns",
filter: "Apply filter",
sortAscending: "Sort (asc)",
sortDescending: "Sort (desc)"
}
},
sortable: true,
filterable: true,
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
</script>

 columnMenu.messages.columns String（默认：“Columns”） 默认值是根据语言包，如果是中文是"列"

这个代表列菜单中列控制的菜单显示文字。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  columnMenu: {
    messages: {
      columns: "Choose columns"
    }
  },
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
</script>

columnMenu.message.filter  String（default:"Filter"）   使用中文语言包后为“过滤”

这个代表列菜单中过滤菜单项的菜单文字。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  columnMenu: {
    messages: {
      filter: "Apply filter",
    }
  },
  filterable: true,
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
</script>

columnMenu.messages.sortAscending  String（默认：“Sort Ascending”） 使用中文语言包后为“升序”

这个代表列菜单中升序菜单项的菜单文字。

复制代码

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  columnMenu: {
    messages: {
      sortAscending: "Sort (asc)",
    }
  },
  sortable: true,
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
</script>

复制代码

columnMenu.message.sortDescending  String（默认：“Sort Descending”） 使用中文语言包后为“降序”

列菜单的降序菜单的显示文字。

复制代码

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  columnMenu: {
    messages: {
      sortDescending: "Sort (desc)",
    }
  },
  sortable: true,
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
</script>

复制代码

columnMenu.message.settings  String（默认：“Column Setting”）

这个是菜单头部的显示文字（仅在移动模式下可用）。

mobile:'phone'模式下可用。

复制代码

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  columnMenu: {
    messages: {
      settings: "Column Options",
    }
  },
  mobile: "phone",
  sortable: true,
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
</script>

复制代码

columnMenu.message.done   String(default:“Done”)

菜单头部文字显示（仅在移动模式可用）

mobile:'phone'模式下可用。

复制代码

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  columnMenu: {
    messages: {
      done: "Ok",
    }
  },
  mobile: "phone",
  sortable: true,
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
</script>

复制代码

 columnMenu.messages.lock   String（default：“Lock”）

 列菜单锁定列菜单的显示文字。

存在问题：等把column配置中的locked和lockable两个配置完成以后，再回头来确定

columnMenu.messages.unlock  String（默认：“Unlock”）

存在问题：等把column配置中的locked和lockable两个配置完成以后，再回头来确定

columnMenu的配置#End---------------------------------------------------------------------------------------------------------------------------------------

dataSource   Object|Array|kendo.data.DataSource

数据源部件用于显示table rows。Javascript对象表示一个有效的数据源的配置，也可以是一个Javascript数组或者一个kendo.data.DataSource实例。

当dataSource配置是一个javascript 对象或者array 对象，这些都会被隐式的初始化成kendo.data.DataSource 实例。

当dataSource配置本身就是kendo.data.DataSource实例就直接使用，不会被初始化。

例子—javascript object的数据源

复制代码

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
    data: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
    ]
  }
});
</script>

复制代码

例子—javascript array的数据源

作者备注：给的例子与javascript object的数据源没有区别

复制代码

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
</script>

复制代码

 例子—已存在的kendo.data.DataSource对象

作者备注：

1、DataSource支持jsonp跨域

2、grid如果不配置column，会默认根据dataSource自动生成column配置。

复制代码

<div id="grid"></div>
<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://demos.telerik.com/kendo-ui/service/products",
      dataType: "jsonp"
    }
  },
  pageSize: 10
});
$("#grid").kendoGrid({
  dataSource: dataSource,
  pageable: true
});
</script>

复制代码

 detailTemplate   String|Funtion

模板展示详情行。检查详情模板通过在线demo。

作者备注：

1、detailTemplate相当于可以将列展开展示详情。

注：deatilTemplate内容不能比主列宽，除非详细模板支持滚动。

例子—Function Template

复制代码

<script id="detail-template" type="text/x-kendo-template">
  <div>
    Name: #: name #
  </div>
  <div>
    Age: #: age #
  </div>
</script>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  detailTemplate: kendo.template($("#detail-template").html())
});
</script>

复制代码

 例子—指定string 详情模板

复制代码

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  detailTemplate: "<div>Name: #: name #</div><div>Age: #: age #</div>"
});
</script>

复制代码

editable   Boolean|Object（default:false）

当设置成true，用户可以编辑绑定的数据。默认是不允许编辑。

可以设置一个字符串（“inline”,"incell"或者“popup”）用于指定编辑模式。默认编辑模式“incell”。

incell：列单独编辑。

inline：行编辑，columns必须有"command:'edit'"

popup：弹出编辑框，columns必须有"command:'edit'"

可以设置一个javascript object 代表编辑配置。

“inline”和“popup”编辑模式由“edit”列命令触发。因此columns必须含有“edit”命令。

例子—可以编辑

复制代码

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  editable: true
});
</script>

复制代码

例子—弹出编辑

复制代码

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: "edit" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  editable: "popup"
});
</script>

复制代码

 #editable 配置     start-----------------------------------------------------------------------------------------------------

editable.confirmation  Boolean|String|Function（default：true）

当设置成true，用户点击“destroy”命令按钮的时候，弹出确认对话框。

String—能设置确定对话框的确认文字，比如“你确定删除吗？”。

Function—方法被调用，return "你确定删除吗？"，作为确认框的文字内容。

例子—确认对话框不可用

复制代码

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [
     { field: "name" },
     { field: "age" },
     { command: "destroy" }
   ],
   dataSource: [
     { name: "Jane Doe", age: 30 },
     { name: "John Doe", age: 33 }
   ],
   editable: {
     confirmation: false
   }
});
</script>

复制代码

例子—设置删除按钮的确认框文字

复制代码

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [
     { field: "name" },
     { field: "age" },
     { command: "destroy" }
   ],
   dataSource: [
     { name: "Jane Doe", age: 30 },
     { name: "John Doe", age: 33 }
   ],
   editable: {
     confirmation: "Are you sure that you want to delete this record?"
   }
});
</script>

复制代码

例子—通过方法返回确认框文字

复制代码

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [
     { field: "name" },
     { field: "age" },
     { command: "destroy" }
   ],
   dataSource: [
     { name: "Jane Doe", age: 30 },
     { name: "John Doe", age: 33 }
   ],
   editable: {
     confirmation: function(e) {
         return  "Are you sure that you want to delete record for " + e.name + "?";
     }
   }
});
</script>

复制代码

editable.cancelDelete   String（默认：“Cancel”），如果引用了中文语言包 为“取消” 

当confirmation被启用当用户点击“删除”，取消按钮的文字，当grid的mode:'phone'才有效。

例子—修改取消按钮，手机模式

复制代码

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [
     { field: "name" },
     { field: "age" },
     { command: "destroy" }
   ],
   dataSource: [
     { name: "Jane Doe", age: 30 },
     { name: "John Doe", age: 33 }
   ],
   mobile: "phone",
   editable: {
     confirmation: true,
     cancelDelete: "No"
   }
});
</script>

复制代码

editable.confirmDelete   String（default：‘Delete’）

当confirmation被启用当用户点击“删除”，确认删除按钮的文字，当grid的mode:'phone'才有效。

复制代码

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [
     { field: "name" },
     { field: "age" },
     { command: "destroy" }
   ],
   dataSource: [
     { name: "Jane Doe", age: 30 },
     { name: "John Doe", age: 33 }
   ],
   mobile: "phone",
   editable: {
     confirmation: true,
     confirmDelete: "Yes"
   }
});
</script>

复制代码

editable.createAt String（default:'top'）

新增一条数据插入的位置。top第一行；bottom最后一行。默认是在第一行。

例子—Grid最后插入一条数据。

复制代码

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  editable: {
    createAt: "bottom"
  },
  toolbar: ["create"]
});
</script>

复制代码

 editable.mode  String(default:‘incell’)

编辑模式。支持编辑模式"incell","inline"和“popup”。

incell:单元格内编辑。

inline:行内编辑。

popup:弹窗

 “inline”和“popup”编辑模式通过column 命令 “edit”，因此一定需要 “edit” column.

例子——"inline"编辑模式

复制代码

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: "edit" }
  ],
  dataSource: {
    data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 }
    ],
    schema: {
      model: { id: "id" }
    }
  },
  editable: {
    mode: "inline"
  }
});
</script>

猜你喜欢

转载自blog.csdn.net/baiduwenku112/article/details/110110464
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022