1.选中表格控件右击通用表格配置

• 点击添加一行按钮，表格新增一行
• 列名：必须对应后台数据返回字段,字段严格按照命名规范
• 显示列名：用于表格头部显示名称，即字段的含义
• 设置行背景颜色，字体颜色，字体大小，是否隐藏等
• 

2.脚本编辑

• onChange(objectname,value)
  • 说明：点击表格某一行时触发该事件，执行对应的脚本
  • value: 当前选中行的数据

• pkgrid.setRows(gridName, rowDataItems)
  • 说明：表格设置数据 gridName:控件名称，rowDataitems：数据格式参考:[{'col1':'11','col2':'22'},{'col1':'33','col2':'44'}]

• pkgrid.addRows(gridName, rowDataItems) 同上
• pkgrid.deleteRows(gridName, rowDataItems)
  • 说明:根据rowDataItems数据中的id 删除对应行的数据  可以在onChange中直接传value

• pkgrid.getSelectedRows(gridName)
  • 说明:获得当前选中行的数据

• setStyle(gridName,data)  设置表格样式（具体可以参考css文档）

  • 示例：

    pkgrid.setStyle('grid', {
        headerBorder: {
            border: 'border',
            style: 'solid',
            width: '1px',
            color: 'red'
        },

        body:{
          bgcolor: 'pink'/‘transparent’(透明),
          color: 'blue'
        },
    
        bodyBorder: {
            border: 'border-bottom',
            style: 'solid',
            width: '1px',
            color: 'red'
        },
        trHoverEnter: {
            bgColor: 'red',
            color: 'blue'
        },
        trHoverLeave: {
            bgColor: 'transparent',
            color: 'cyan'
        },
        headerText:{
            align:'center',
            color:'#fff',
            bgcolor:'blue'/‘transparent’(透明),
        },
        bodyAlign:'center'
        })
  • 再加上：$('html > head').append($('<style type = "text/css">#designer .k-grid-header{background-color:transparent;}#designer th{background-color:transparent;}#designer tr{background-color:transparent;}</style>'));    这是在深色背景下，设置表格背景透明用的
  • body:表格内容盒
    • bgcolor: 表格内容盒的背景颜色
    •  color: 表格内容盒的字体颜色
  • headerBorder：表格标题边框
    • border：边框类型   border-四边都有边框，border-top-上边框，border-right-右边框，border-bottom：下边框，border-left：左边框
    • style：边框的样式   dotted: 定义一个点线边框，dashed: 定义一个虚线边框，solid: 定义实线边框，double: 定义两个边框。 两个边框的宽度和 border-width 的值相同。。。

    • width：边框的宽度

    • color：边框的颜色
  • bodyBorder：表格内容边框
    • border：边框类型   border-四边都有边框，border-top-上边框，border-right-右边框，border-bottom：下边框，border-left：左边框
    • style：边框的样式   dotted: 定义一个点线边框，dashed: 定义一个虚线边框，solid: 定义实线边框，double: 定义两个边框。 两个边框的宽度和 border-width 的值相同。。。

    • width：边框的宽度

    • color：边框的颜色
  • trHoverEnter：表格内容鼠标移入效果
    • bgColor：背景颜色
    • color：文字颜色
  • trHoverLeave：表格内容鼠标移出效果
    • bgColor：背景颜色
    • color：文字颜色
  • headerText：表格标题文本样式
    • align：文本对齐方式  left-左对齐，center-居中对齐，right-右对齐
    • color：文字颜色
    • bgcolor:表格标题背景色
  • bodyAlign：表格内容文本对齐方式  left-左对齐，center-居中对齐，right-右对齐