kendoUi常用组件记录

tabstrip

<div id="tabstrip" style="height:100%">
  <ul>
    <li class="k-state-active">
      待支付
    li>
    <li>
      支付中
    li>
    <li>
      支付挂起
    li>
    <li>
      支付成功
    li>
    <li>
      支付失败
    li>
  ul>
  <div style="clear:both;">
    <div id="unpaid">div>
  div>
  <div style="clear:both;">
    <div id="paymenting">div>
  div>
  <div style="clear:both;">
    <div id="payHangUp">div>
  div>
  <div style="clear:both;">
    <div id="paySuccess">div>
  div>
  <div style="clear:both;">
    <div id="payFailure">div>
  div>
div>

var tabstrip = $("#tabstrip").kendoTabStrip({
  height: '100%',
  animation: false
}).data("kendoTabStrip");
tabstrip.tabGroup.on("click", ".k-i-close", function (e) {
  e.preventDefault();
  e.stopPropagation();
  var item = $(e.target).closest(".k-item");
  var index = item.index(),
      prev = item.next().length == 1 ? item.next() : item.prev();
  tabstrip.remove(item.index());
  tabstrip.select(prev)
});

列模板

var columns = [
  {
    field: "payNumber",
    title: "单据编号",
    width: 120,
    attributes  : {style: "text-align:center"},
    template : function(e) {
      return '')">'+
        e.payNumber
        + ''
    }
  },
  {
    field: "docDate",
    title: "单据日期",
    width: 120
  }
]

kendo Window

var payDetail =  $('#payDetail').kendoWindow({
  actions: ["Close"],
  width  : '95%',
  height : '95%',
  title  : '支付单明细',
  visible: false,
  iframe : true,
  modal  : true,
  content: 'task_payment_detail.html?taskPaymentId='+id,
}).data("kendoWindow");
payDetail.center().open();

modal : true 是否在页面显示模态叠加，实现底层窗口不可点击
visible: false 指定窗口最初是否可见

kendo下拉列表

var caIdData = [{
  caId:1,
  caIdName:"123"
}]
$('#ukeyNumber').kendoDropDownList({
  dataTextField: "caId",
  dataValueField: "caIdName",
  dataSource: caIdData,
  index:0,
});
//设置选择第几个
$("#ukeyNumber").data("kendoDropDownList").select(0);

获取grid选中数据

var checked = $('#unpaid').data('kendoGrid').selectedDataItems()

刷新Grid

$('#unpaid').data('kendoGrid').dataSource.read();