KendoUI: Use of the Grid Control and the kendouigrid Control

KendoUI: Use of the Grid Control and the kendouigrid Control

1. Create and configure basic options

There are two ways to create a grid. Here I use an existing html div tag, and then convert the div element kendo.

<Div id = "grid"> </div> <script th: inline = "javascript" >$ (function () {$ ('# grid '). kendoGrid ({dataSource: dataSource, // set input: true, numeric: false, refresh: true, pageSizes: true, buttonCount: 5}, sortable: true, // sortable height: 430, // table height setting toolbar: [// toolbar, which can be customized using the template {name: "create ", text: "add"}, {template: kendo. template ($ ("# pageStyleSkinTemplAddTemplate" ).html ()}, {template: kendo. template ($ ("# pageStyleSkinQueryTemplate" ).html ()}], columns: [// table column setting {field: "fileName ", // The Name Of The field corresponding to data in dataSource: title: "style name", // header name width: 200 // column width}, {field: "updaterId", title: "updated by", width: 100 },{ field: "updateTime", title: "Upload time", width: 200, format: "{0: yyyy-MM-dd HH: mm: ss} "// format time}, {command: [// operation on row data {text:" edit ", // name click: editFunction // custom click Event}, {text: "Download", click: loadFunction}, {name: "destroy ", // call the data source deletion method text: "delete"}], title: "operation", // header name width: "250px" // column width}], editable: {mode: "popup", // edit mode in the pop-up window (intra-row EDIT: "inline")}, setting of displaying Chinese information in messages: // pagination part {display: "Showing {0}-{1} from {2} data items", empty: "No data"}) ;}); </script>

2. Basic CRUD operations

(1) assume that the data source is an ajax request. I will not use the ajax requests encapsulated by kendo here, but I will use flexible self-written ajax requests.

Var codeGridSource = new kendo. data. dataSource ({transport: {read: function (options) {var map = {}; if (options. data. take) map. take = options. data. take; if (options. data. skip) map. skip = options. data. skip; if (options. data. page) map. page = options. data. page; if (options. data. pageSize) map. pageSize = options. data. pageSize; if (! Options. data. filter) {} else {options. data. filter = {logic: "and", filters: [{field: "codeName", value: $ ("# codeName "). val ()}, {field: "codeType", value: $ ("# codeType "). val ()}, {field: "codeTypeName", value: $ ("# codeTypeName "). val ()}, {field: "codeCode", value: $ ("# codeCode "). val ()}]}; var fi1 = {}; var fi2 = []; var j = 0; $. each (options. data. filter. filters, function (I, element) {if (options. data. fi Lter. filters [I]. value) {fi2 [j] = options. data. filter. filters [I]; j ++;}); if (fi2.length> 0) {fi1.filters = fi2; fi1.logic = options. data. filter. logic; map. filter = fi1 ;}/// sort if (! Options. data. sort) {} else {options. data. sort = [{field: $ ("# codeOrder0 "). val (), dir: $ ("# codeDir0 "). val ()}, {field: $ ("# codeOrder1 "). val (), dir: $ ("# codeDir1 "). val ()}]; var fi3 = []; var j = 0; $. each (options. data. sort, function (I, element) {if (options. data. sort [I]. field) {fi3 [j] = options. data. sort [I]; j ++ ;}}); if (fi3.length> 0) {map. sort = fi3 ;}}$. ajax ({url: "code/single-list.json", dataType :" Json ", data: {models: kendo. stringify (map)}, type: "POST", success: function (result) {options. success (result) ;}, error: function (result) {options. error (result) ;}}) ;}, update: function (options) {$. ajax ({url: "code/single-update.json", dataType: "json", data: {models: kendo. stringify (options. data. models)}, type: "POST", success: function (result) {options. success (result) ;}, error: functi On (result) {options. error (result) ;}}) ;}, destroy: function (options) {$. ajax ({url: "code/delete. json ", dataType:" json ", data: {models: kendo. stringify (options. data. models)}, type: "POST", success: function (result) {options. success (result) ;}, error: function (result) {options. error (result) ;}}) ;}, create: function (options) {$. ajax ({url: "code/single-create.json", dataType: "json", dat A: {models: kendo. stringify (options. data. models)}, type: "POST", success: function (result) {options. success (result) ;}, error: function (result) {options. error (result) ;}}) ;}, batch: true, pageSize: 8, serverPaging: true, serverSorting: true, serverFiltering: true, schema: {errors: function (response) {return response. error;}, data: "list", total: "total", model: {id: "id", fields: {codeIndex: {Editable: true, type: "number", defaultValue: 0, validation: {required: true, min: 0 }}, codeCode: {editable: true, type: "string", validation: {codeCodevalidation: function (input) {if (input. is ("[name = codeCode]") & $. trim (input. val () = "") {input. attr ("data-codeCodevalidation-msg", "Enter the Business Code! "); Input.css (" border-color "," red "); return false;} else {input.css (" border-color "," #94C0D2 ");} return true ;}}, codeName: {editable: true, type: "string"}, codeType: {editable: true, type: "string", validation: {codeTypevalidation: function (input) {if (input. is ("[name = codeType]") & $. trim (input. val () = "") {input. attr ("data-codeTypevalidation-msg", "Enter the code type! "); Input.css (" border-color "," red "); return false;} else {input.css (" border-color "," #94C0D2 ");} return true ;}}, codeTypeName: {editable: true, type: "string" }}}, error: function (e) {alert (e. errors); // displays "Invalid query" codeGridSource. cancelChanges ();}});

(2) Use the encapsulated ajax request that comes with kendo to implement it.

Var dataSource = new kendo. data. dataSource ({transport: {read: {url: "xxx. json ", // define query urltype:" POST "}, create: {url:" xxx. json ", // defines the addition of urltype:" POST "}, update: {url:" xxx. json ", // define and modify urltype:" POST "}, destroy: {url:" xxx. json ", // define Delete urltype:" POST "}, parameterMap: function (options, operation) {// define the parameter var map submitted to the background = {}; if (operation! = "Read") {return {models: kendo. stringify (options. models) // parameters returned during the query operation };}; if (options. take) map. take = options. take; if (options. skip) map. skip = options. skip; if (options. page) map. page = options. page; if (options. pageSize) map. pageSize = options. pageSize; if (! Options. filter) {} else {// set the query conditions and connector options. filter = {logic: "and", // define the connector between Query conditions filters: [{field: "startTime", value: $ ("# startTime "). val () // value of the query condition}, {field: "endTime", value: $ ("# endTime "). val ()}, {field: "fileName", value: $ ("# fileName "). val ()},]}; var fi1 = {}; var fi2 = []; var j = 0; $. each (options. filter. filters, function (I, element) {if (options. filter. filters [I]. val Ue) {fi2 [j] = options. filter. filters [I]; j ++;}); if (fi2.length> 0) {fi1.filters = fi2; fi1.logic = options. filter. logic; map. filter = fi1 ;}} if (! Options. sort) {} else {// set options for sorting options. sort = [{field: $ ("# pageStyleSkinOrder0 "). val (), dir: $ ("# pageStyleSkinDir0 "). val ()}, {field: $ ("# pageStyleSkinOrder1 "). val (), dir: $ ("# pageStyleSkinDir1 "). val ()}]; var fi3 = []; var j = 0; $. each (options. sort, function (I, element) {if (options. sort [I]. field) {fi3 [j] = options. sort [I]; j ++ ;}}); if (fi3.length> 0) {map. sort = fi3 ;}// the operation is the parameter if (operation = "read") {return {models: kendo. stringify (map) };}}, batch: true, // batch pageSize: 8, // set serverPaging: true for the number of entries displayed on each page, // supports the paging function serverSorting: true, // supports the sorting function serverFiltering: true, // supports the query function schema: {errors: function (response) {return response. error; // error message display}, data: "list", // define data source total: "total", // total page number model: {id: "id ", // set fields: {// obtain the value of the field to be obtained based on the field of the object in data fileName: {editable: true, // set it to editable validation: // verification: cannot be blank {required: true }}, updateTime: {type: "date" // set field type }}}, error: function (e) {// Display error information alert (e. errors); dataSource. cancelChanges ();}});