标签: jsgrid

我真的很难使用Controller服务加载jsGrid.我无法正确地做到这一点.

我甚至尝试了jsGrid站点演示中的示例代码,但是它也没有工作,它会在!this.data.length处抛出错误,或者网格根本不加载.

每次尝试使用下面的代码时,我都没有数据.

感谢是否有人可以提供帮助.

这是加载jsGrid的方式:

$(element).jsGrid({
   height: 300,
   width: "100%",
    filtering: true,
    sorting: true,
    paging: true,
    autoload: true,
    pageLoading: true,

    controller: {
        loadData: function (filter) {
            $.ajax({
                type: "GET",
                url: "../Common/GetData",
                data: filter,
                dataType: "JSON"
            });
        }
    },
    pageSize: 10,
    pageButtonCount: 5,
    pageIndex: 1,

    noDataContent: "No Record Found",
    loadIndication: true,
    loadIndicationDelay: 500,
    loadMessage: "Please, wait...",
    loadShading: true,

    fields: [
        { name: "Name", type: "textarea", width: 150 },
        { name: "Age", type: "number", width: 50 },
        { name: "Address", type: "text", …

我想添加多个自定义控件按钮,以便我可以向按钮添加自定义单击事件.我遇到的问题是只显示删除按钮.我希望每一行都显示编辑和删除按钮.我有以下代码:

<script>
    $( document ).ready(function() {
      $("#jsGrid").jsGrid({
           height: "auto",
           width: "100%",
           sorting: true,
           paging: true,
           autoload: true,
           pageSize: 10,
           pageButtonCount: 5,
           deleteConfirm: "Do you really want to delete your job listing?",
           controller: {
               loadData: function(filter) {
                   return $.ajax({
                       type: "GET",
                       url: "<?php echo site_url('/job/getjobs/'.$this->session->employer_id); ?>",
                       data: filter
                   });
               },
           },
           fields: [
               { name: "id", title: "id", type: "text", visible: false, width: 100 },
               { name: "title", title: "Title", type: "text", width: 100 },
               { name: "created_on", title: "Created On", …

我在我的项目中使用jsGrid,现在我被困在这里隐藏在代码中使用但不应在页面中显示的列.

我使用的网格是:jsGrid

我试图采取输入控制,hidden但仍然无法正常工作.

以下代码定义了我为其中隐藏字段的网格列AccountID.但是,它不起作用.

码:

fields: [
        { name: "Account", width: 150, align: "center" },
        { name: "Name", type: "text" },
        { name: "AccountID", type: "hidden", width: 0}
    ]

我目前正在使用js-grid将数据库查询返回的数据作为 Web 应用程序的一部分进行显示。所有功能似乎都按照我的意愿运行；但是，当返回的数据导致整个网格的高度大于父元素的高度时，就会“溢出”。

例如，它应该看起来像：

但是，有了足够的数据，我得到：

我已将heightjsGrid 调用中的值设置为容器元素的值，并尝试使用 css 和 jQuery 设置 aheight和max-heightcss 值。scroll我还添加了and的溢出auto，但没有效果。

function surfaceDataGrid(message, recipient) {
var fieldData = JSON.parse(message.Data);
activeRequests.splice(0, activeRequests.length);
var columns = getColumns(recipient);
var Columns = columns.list.length;
var recipientElement = '#' + recipient;
var gridHeight = $(recipientElement).height();
var gridWidth = $(recipientElement).width();
$(recipientElement).html('<div id="jsgrid"></div>');
if (fieldData.length !== 0) {
    loggingAction('log', 'NOTIFICATION : Query returned ' + fieldData.length + ' rows of data. ');
    $(recipientElement).children('#jsgrid').jsGrid({
        data: …

我可以显示静态数据，data: ary并且成功地更新、删除、插入和过滤所述静态数据：

controller: {

    loadData: function (filter) {

        return $.grep(ary, function (obj, index) {
            return
            /* conditional logic for filtering here */
        });

    },

    updateItem: function (item) {

        //call custom framework function responsible for updating record
        appName.doRequest("updateRecord");

    },

    insertItem: function (item) {

        //call custom framework function responsible for inserting record
        appName.doRequest("insertRecord");

    },

    deleteItem: function (item) {

        //call custom framework function responsible for deleting record
        appName.doRequest("deleteRecord");

    },

},

请注意，ary是一个全局变量。基本上，我可以ary通过我们的自定义框架随时更新；但是，它必须在 jsGrid 控制器之外，否则数组最终为空。

为什么我要叫负责填充阵列而功能之外的loadData() …

我发现这个例子在选择一行后突出显示了一行，但问题在于它在选择另一行后保持前一行突出显示。

这是代码的一部分

//js
rowClick: function(args) {
        var $row = this.rowByItem(args.item);

      $row.toggleClass("highlight");
    }, 

//css
tr.highlight td.jsgrid-cell {
    background-color: green;
}

我找不到取消突出显示先前选择的行的解决方案

有没有办法让服务器端分页jsgrid？我知道我们可以用服务器端过滤数据,但不能分页？

我使用 Ajax 将数据加载到 jsGrid 中。

我有以下代码：

$("#jsGrid").jsGrid({
    width: "100%",
    height: "100%",

    autoload:   true,
    paging:     true,
    pageSize:   15,
    pageButtonCount: 5,
    pageIndex:  1,

    controller: {
        loadData: function(filter) {
            var d = $.Deferred();
            $.ajax({    url: "/api/index.php/get_data",
                        contentType: "application/json; charset=utf-8",
                        data: {a:(filter.page?filter.page:0)},
                        dataType: "json"
                    }).done(function(response){
                        console.info(response);
                        d.resolve(response);
                    });
            return d.promise();
        }
    },
    fields: [
        { name: "ID", type: "number", width:50 },
        { name: "platform", type: "text", width: 100 },
        { name: "title", type: "text", width: 150 },
        { name: "url_image", type: "text", width: 200 …

关于如何从名称相似的jqGrid 中清除数据有很多答案，但我找不到任何方法可以从jsGrid 中清除数据。我只想删除所有行并将网格重置为其默认值，没有行。

我确实在这里看到了Batch Delete 方法，但它适用于复选框和条件，而且我没有看到如何简单地无条件删除所有行。