前臺kendo ui js grid框架增刪改查

1，首先定義好後臺數據，返回一組json數據

@RequestMapping("/showUsers.do")
    @ResponseBody
    public Map<String, Object> userList(
            @RequestParam(value = "page", required = false, defaultValue = "0") Integer page,
            @RequestParam(value = "pageSize", required = false, defaultValue = "20") Integer pageSize) {
        List<UserDto> users=userService.list(page,pageSize);
        int count=userService.getTotalCount();
        Map<String, Object> _result = new HashMap<String, Object>();
        _result.put("results", users);
        _result.put("__count", count);
         
        Map<String, Object> result = new HashMap<String, Object>();
        result.put("d", _result);
        return result;
    }
     
     
    @RequestMapping("/users.do")
    public String  userListPage() {
        return "user/user.jsp";
    }

如上：後臺json格式爲固定，__count 對應數據總條數，前臺會根據配置自動分頁，

當然返回json格式也可以自定義，如返回格式爲

String json = new Gson().toJson(list);
return "{\"users\" :" + json + ", \"totalSize\" :" + totalSize + "}";

如此前臺定義 schema 時，需加入如下配置：（具體配置下面會看到）
data : "hosts",
total: "totalSize",

2，下面來看一下前臺部分

a,首先要有一個jsp頁面，並定義一個有id的div

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>  
<%@ taglib prefix='spring' uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<head>
<link rel="stylesheet" type="text/css" href="<spring:url value='/resources/css/common.css'/>" />
<link rel="stylesheet" type="text/css" href="<spring:url value='/resources/js/plugins/easyUI/themes/default/easyui.css' />">
<link rel="stylesheet" type="text/css" href="<spring:url value='/resources/css/themes/default/main.css' />">
<link rel="stylesheet" type="text/css" href="<spring:url value='/resources/css/themes/default/icon.css' />">
<link rel="stylesheet" type="text/css" href="<spring:url value='/resources/css/themes/default/bootstrap.css' />">
<link rel="stylesheet" type="text/css" href='<spring:url value="/resources/js/plugins/kendoui/styles/kendo.common.min.css"/>'/>
<link rel="stylesheet" type="text/css" href='<spring:url value="/resources/js/plugins/kendoui/styles/kendo.uniform.min.css"/>'/>
<link rel="stylesheet" type="text/css" href='<spring:url value="/resources/js/plugins/kendoui/styles/kendo.silver.min.css"/>'/>
<link rel="stylesheet" type="text/css" href='<spring:url value="/resources/css/kendo_ui_gray.css"/>'/>

<script src="<spring:url value='/resources/js/plugins/kendoui/js/jquery.min.js' />"></script>
<script src='<spring:url value="/resources/js/plugins/kendoui/js/kendo.all.min.js"/>'></script>
<script src="<spring:url value='/resources/js/plugins/jquery.easyui.min.js' />"></script>
<script src="<spring:url value='/resources/js/modules/user/userList.js' />"></script>
</head>
<body>
<div id="example" class="k-content">
        <div id="clientsDb">
            <div id="grid" style="height: 380px"></div>
        </div>
</div>
<div id="dialog"></div>
</body>

b,來看一下js部分，首先需要定義一個datasource

$(function() {
    var dateFormate = "yyyy-MM-dd HH:mm:ss";
    
    var prefix = "user";
    
    var dataSource = new kendo.data.DataSource({
        type: "odata",
        pageSize : 20,
        serverPaging: true,//服務器端是否進行分頁查詢
       serverFiltering: true,
        transport : {
            read : {
                url : prefix + '/showUsers.do',
                dataType : "json",
            },
            update: {
                url: prefix + '/save.do',
                dataType: "json",
                contentType:"application/x-www-form-urlencoded",
                type : "post",
                data: function() {
                    var roleid=$("#roleId").val();
                    return {
                     roleId:roleid
                    }
                  }
            },
            destroy: {
              url: prefix + '/delete.do',
              contentType:"application/x-www-form-urlencoded",
                type : "post",
              dataType: "json",
            },
            create: {
                url: prefix + '/save.do',
                dataType: "json",
                contentType:"application/x-www-form-urlencoded",
                type : "post",
                data: function() {
                    var roleid=$("#roleId").val();
                    return {
                     roleId:roleid
                    }
                  }
            },
            parameterMap: function(data, type) {
                if (type == "create"||type == "update") {
                    delete data.role;
                    
                    var roleid=$("#roleId").val();
                    data.roleId=roleid;
                }
                return data;
            }
        },
        requestEnd: function(e) {
            var response = e.response;
            if(response){
                var type = e.type;
                if(type !='read'){
                    var status = response.status;
                    if(status == 200){
                        //lert(response.message);
                        this.read();
                    } else {
                        alert(response.message);
                    }
                }
            }else{
                alert("服務器異常，請重試！");
            }
            
        },
        schema : {
            model : {
                id : "id",
                fields : {
                    id : {type : "string"},
                    password :{type : "string"},
                    realName : {type : "string"},
                    phone : {type : "string"},
                    status : {
                        type : "string",
                        defaultValue : "激活"
                    },
                    userName : {type : "string"},
                    email : {type : "string"},
                    role : {},
                    createdTime : {
                        type : "string",
                        //this field will not be editable (default value is true)
                        editable: false,
                        defaultValue: kendo.toString(new Date(), dateFormate)
                    }
                }
            }
        },
        sort : {
            field : "createdTime",
            dir : "desc"
        },

    });
  
});

下面說一下重要的配置點，

dataSource：定義grid加載的數據源，以及配置增刪改表單提交的url和需要的表單參數

首先需要配置一個dataSource來獲取後臺數據，以及增刪改的操作
那個type:odata 官網是這麼說的If set the data source will use a predefined transport and/or schema.
 The supported values are "odata" which supports the OData v.2 protocol and "signalr".
沒看懂，反正就默認的odata就對了

transport ，就是配置增刪改查的連接，配置好，後都會自動操作的
注意的是sava 與update   contentType:"application/x-www-form-urlencoded", 後臺可以直接通過對應的bean接收參數，
（字段類型最好一致，如時間的格式，不然可能會報400的錯，其實就是格式沒對應，如果出現，可通過firebug查看一下請求的參數書否對應）

create 中的data可在請求之前進行追加參數，注意是追加，格式也是json格式

parameterMap
type 就是“read” “create”等
data 就是 model 中定義的屬性，是json的格式，可通過判斷在提交表單時追加參數，或者去除無關的參數

requestEnd 是在操作完之後進行的回調時間，可獲取到response 進行判斷操作是否成功
對應的有requestStart 可以在請求發送之前進行js操作

schema  用於在轉換後臺發送來的數據 對應javabean

C,下面通過jquery選取 html中定義的對應id的div元素來加載通過kendo實例的grid

$("#grid").kendoGrid({
            dataSource : dataSource,
            sortable : false,
            selectable : "multiple",// 多選
            height : 500,
            navigatable: true,
            //toolbar: ["create", "save", "cancel"],
             editable: true,
            toolbar : [ 
                {
                    name : "create",
                    text : "新增用戶"
                }
            ],
            pageable : {
                pageSize : 20,// 一頁顯示多少行數據
                previousNext : true,// 是否允許有上一頁、下一頁、首頁、尾頁摁扭
                numeric : true,// 是否顯示翻頁處的頁數按鈕
                buttonCount : 5,// 限制頁數按鈕的顯示個數
                input : false,// 是否顯示輸入頁數的文本框
                refresh : true,// 是否允許刷新頁面
                pageSizes : true,// 是否允許調整一頁顯示的行數，可設置[5, 10, 15]
                messages : {
                    display : "顯示  {0}-{1} 條數據 總共 {2} 條數據",
                    empty : "沒有數據",
                    itemsPerPage : "選擇顯示行數",
                    refresh : "刷新",
                    previous : "上一頁",
                    next : "下一頁",
                    last : "尾頁",
                    first : "首頁"
                }
            },
            columns : [ // 顯示列定義
                {
                    field : "realName",
                    width : 100,
                    title : "姓名"
                }, {
                    field : "userName",
                    width : 120,
                    title : "用戶名",
                    attributes : {
                        "class" : "table-cell",
                        style : "text-align: left; font-size: 14px"
                    }
                }, {
                    field : "password",
                    title : "密碼",
                    hidden: true,
                    editor: function (container, options) {
                        $('<input data-text-field="' + options.field + '" ' +
                                'class="k-input k-textbox" ' +
                                'type="password" ' +
                                'data-value-field="' + options.field + '" ' +
                                'data-bind="value:' + options.field + '"/>')
                                .appendTo(container);
                    }
                }, {
                    field : "phone",
                    width : 120,
                    title : "聯繫電話"
                }, {
                    field : "email",
                    width : 120,
                    title : "Email"
                }, {
                    field : "role",
                    width : 80,
                    title : "角色",
                    template: "#=role.name#",
                    editor: roleDropDownEditor
                },{
                    field : "status",
                    width : 80,
                    title : "啓動狀態",
                    editor : userStatusDownEditor,
                    template : "#=status#"
                }, {
                    field : "createdTime",
                    width : 150,
                    title : "創建時間",
                    format : "{0: yyyy-MM-dd HH:mm:ss}"
                },{
                    command : [ 
                        {
                            name : "edit",
                            text : {
                                edit : "信息修改",
                                cancel : "關閉",
                                update : "提交"
                            }
                        }, {
                            name : "destroy",
                            text : "刪除"
                        } 
                    ],
                    title : "操作",
                    width : "160px"
                } ],
                editable : {// 設置可以在列表中進行編輯數據
                    // 設置刪除時顯示的確認信息
                    confirmation : "您確定要進行刪除操作嗎？",
                    //createAt : "top",// 添加位置，默認是top：從第一行進行添加
                    destroy : true,// 不允許刪除
                    mode : "popup",// 設置編輯形式爲彈出框(popup)還是在列表中(inline)
//                    template: kendo.template($("#editTemplate").html())//設置彈出框中加載的內容,設置此項mode必須是popup
                },
                /*groupable : {// 設置列表表頭
                    messages : {empty : "用戶信息列表"}
                },*/
                groupable : false                
        });
    
    
    function userStatusDownEditor(container, options){
        var status = options.model.status;
        var data = [
                    { text: "激活", value: "激活" },
                    { text: "凍結", value: "凍結" }
                ];
        
        var statusDroplist = $('<input required data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '"/>')
        .appendTo(container).kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            dataSource : data
        });
        statusDroplist.data("kendoDropDownList").select(function(dataItem) {
            return dataItem.text === status;
        });
    }
    
    function roleDropDownEditor(container, options) {
        var role = options.model.role;
        //console.log(options);
        var roleDroplist = $('<input required id="roleId" data-text-field="name" data-value-field="id" data-bind="value:' + options.field + '"/>')
            .appendTo(container).kendoDropDownList({
                valuePrimitive: true,
                dataTextField:"role.name",
                dataValueField: "role.id",
                dataSource: {
                    transport: {
                        read: {
                            url : 'role/getRoles.do',
                            dataType: "json"
                        }
                    }
                }
            });
       // console.log(roleDroplist.data("kendoDropDownList"));
       /* roleDroplist.data("kendoDropDownList").select(function(dataItem) {
            if(role)
                return dataItem.value === role.id;
        });*/
    }

重要配置參數：

toolbar 有3個選項 "create", "save", "cancel"  用於save操作，定義後，kendo會通過datasource中的配置自動生成一個form的window

pageable 用於定義分頁的信息，其中後臺可直接獲取 page，pageSize 參數

columns 定義顯示的javabean中的屬性，field 對應javabean屬性，title 顯示grid的中的head，attributes 可定義一些css

template 可用於定義 每一條數據中的特定數據內容如：user，對應的role，很明顯顯示對應的role.name ,就可配置爲"#=role.name#",
也可定義爲一個function，返回對應的顯示值 如status

var statusMap= {"A": "Active", "B": "INActive", "C": "Deleted"};

{
                    field: "status",
                    title: "狀態",
　　　　　　　　　　　　template: function(dataItem) {
                       return statusMap[dataItem.status];
                    },
                    editor: statusDropDownListEditor,
                    width: 80
                },

editor ，用於在update和save的form 中定義編輯組件，如下拉框,他需要定義一個function

function osDropDownListEditor(container, options){  
             $('<input required data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '"/>')
            .appendTo(container).kendoDropDownList({
                dataSource:[{"text": "Active", value:"A"}, {text: "INActive", value:"B"},{text:"Unknown", value:""}],
                dataTextField: "text",
                dataValueField: "value",
            });
        };

這個事簡單的字段取出值對應顯示值，不需去數據庫，

下面可看一下user新增時，選擇對應的role，首先需要重數據庫中取出所有可用的role以供選擇

colums中對應model的定義

{
                    field : "role",
                    width : 80,
                    title : "角色",
                    template: "#=role.name#",
                    editor: roleDropDownEditor
                },

roleDropDownEditor  function

function roleDropDownEditor(container, options) {
        var role = options.model.role;
        //console.log(options);
        var roleDroplist = $('<input required id="roleId" data-text-field="name" data-value-field="id" data-bind="value:' + options.field + '"/>')
            .appendTo(container).kendoDropDownList({
                valuePrimitive: true,
                dataTextField:"name",
                dataValueField: "id",
                dataSource: {
                    transport: {
                        read: {
                            url : 'role/getRoles.do',
                            dataType: "json"
                        }
                    }
                }
            });
       // console.log(roleDroplist.data("kendoDropDownList"));
       /* roleDroplist.data("kendoDropDownList").select(function(dataItem) {
            if(role)
                return dataItem.value === role.id;
        });*/
    }

利用kendo的kendoDropDownList

input中的data-text-field data-value-field 分別對應下拉框的顯示值與選擇是存的value，填寫對應role的id name

kendoDropDownList的屬性

dataSource：定義要從後臺取得role的list
dataTextField:"name",
 dataValueField: "id",分別對應去到的role中的id，與name，kendo會自動裝填到下拉框中
這裏有些問題，kendo在提交表單時好像不能像普通的form表單一樣直接通過如定義name=role.id,然後在後臺直接通過user.role.來取，
我也嘗試過將role改爲json的格式提交，但都失敗了，因此值得在save提交時去掉role參數，換成追加參數roleId來實現，這裏要說一下表單提交時如果參數對不上可能會出現400的錯誤，
這是需要通過firebug查看一下請求時post的參數，
當然我在後臺接收時是通過JavaBean接收的，如果通過map來接收，或者直接通過request.getparameter,應該不會出現。

command ，用於定義表格中對應每一行的編輯或者刪除按鈕
只需把name給與“editor”，“destory” 剩餘的就交給kendo吧

轉載地址：http://www.cnblogs.com/whatadiors/p/3789005.html

qq_23313625

發佈了16 篇原創文章 · 獲贊 9 · 訪問量 9萬+

私信關注

前臺kendo ui js grid框架增刪改查

全新 WebApi 接口測試方法

JS操作日期，獲取當前日期，加一天，減一天

Kendo UI頭像上傳和增刪改查

解決C#後臺返回json數據雙引號轉義爲"問題

小程序解密，官方Demo竟然沒有C#，貼這裏備用

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結