KendoUI: Use of the Grid Control and the kendouigrid Control

Source: Internet
Author: User

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 ();}});


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.