Как использовать сетку пользовательского интерфейса Kendo с поисковой формой и формой поиска на стороне сервера?

У меня есть сетка пользовательского интерфейса Kendo. Сетка построена, но не отображается на странице, пока не будет отправлена форма поиска и ответ будет возвращен сервером. Ответ может привести к большому количеству строк (в зависимости от параметров поиска), поэтому serverPaging устанавливается в true.Как использовать сетку пользовательского интерфейса Kendo с поисковой формой и формой поиска на стороне сервера?

Транспортное свойство в объекте dataSource установлено.

Например:

$('#resultsGrid').kendoGrid({ 
    dataSource: { 
     pageSize : 10, 
     serverPaging: true, 
     schema  : { 
      total: 'total' 
     }, 
     transport : { 
      read: {url: '../search.x'} 
     } 
    } 
    /*... more options*/ 
});

Однако, вызов AJAX (с ../search.x) производится на сервер, когда страницы нагрузок. Как я могу позвонить AJAX при отправке формы поиска и предотвратить ее вызов при загрузке страницы? Кроме того, как я могу прочитать транспорт, вызовите сервер с исходными параметрами POST формы поиска, когда запрашивается следующая/предыдущая страница результатов?

источник

2013-04-25 James

Можете ли вы объяснить более подробно о том, что вы имеете в виду в следующей/предыдущей странице раздела вашего вопроса. – Myzifer

Под «следующей/предыдущей страницей», я имею в виду следующую/предыдущую страницу результатов. Например, предположим, что параметры поиска приводят к 1000 рядам данных. Сервер вернет только 10 строк данных (так как pageSize в приведенном выше коде равен 10). Затем клиент отобразит 10 строк с возможностью получения следующих 10 строк данных с сервера. Когда клиент делает запрос на получение следующих 10 строк, я бы хотел, чтобы параметры поиска были предоставлены серверу, чтобы он мог выполнить запрос, чтобы получить следующие 10 строк. Я надеюсь, что это поможет уточнить, но, пожалуйста, дайте мне знать, если вам нужна дополнительная информация. Спасибо – James

Ah ok Я просто хотел подтвердить, если вы хотите, чтобы параметры были очищены, так как я не был уверен, что это то, о чем вы просили, я видела, что вы задали новый вопрос, я буду отвечать и комментировать дальше. – Myzifer

autoBind до false в инициализации сетки. Документация here

autoBind Boolean(default: true)

If set to false the widget will not bind to the data source during initialization. In this case data binding will occur when the change event of the data source is fired. By default the widget will bind to the data source specified in the configuration.

источник

2013-04-25 15:00:57 OnaBai

Спасибо OnaBai. Это объясняет, как я могу предотвратить вызов ../search.x при загрузке страницы. Вы знаете, как я могу вызвать transport.read при отправке формы? Я попытался сделать точку чтения функции, и эта функция получит параметры формы и вызовет AJAX на сервер. Но если я попытаюсь вызвать $ ('# resultsGrid'). Data ('kendoGrid'). DataSource.transport.read ({skip: 0, take: 10}) при отправке формы я получаю два вызова ../search. x (второй вызов не передает никаких POST-данных). – James

Сделайте ['grid.dataSource.read()'] (http://docs.kendoui.com/api/framework/datasource#methodsread) или ['grid.dataSource.filter()'] (http://docs.kendoui.com/api/framework/datasource#methods-filter) или ['grid.dataSource.fetch()'] (http://docs.kendoui.com/api/framework/datasource#methods-fetch) , Знаете ли вы, что вам не нужно вызывать AJAX вручную только потому, что вам нужно отправить параметры на сервер? Проверьте [this] (http://docs.kendoui.com/api/framework/datasource#configuration-transport.parameterMap) и [это] (http://docs.kendoui.com/api/framework/datasource#configuration- transport.read.data) – OnaBai

Спасибо. чтение, запрос и выборка функции dataSource. Я фактически использую плагин Malsup jQuery Form (http://malsup.com/jquery/form/) для автоматического создания параметров AJAX из формы поиска. Итак, я устанавливаю transport.read для функции, которая имеет следующий код: 'var setupOptions = {success: loadSearch, type: 'POST', dataType: 'json', data: {skip: options.data.skip, take: options.data.take}, url: '../search.x'error: errorHandler.handle, timeout: 50000}; $ (' # searchForm '). ajaxSubmit (setupOptions); ' – James

Как использовать сетку пользовательского интерфейса Kendo с поисковой формой и формой поиска на стороне сервера?

ответ

Смежные вопросы