javascript – KendoUI网格自定义过滤器菜单在第一次过滤或清除后中断

前端之家收集整理的这篇文章主要介绍了javascript – KendoUI网格自定义过滤器菜单在第一次过滤或清除后中断前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用KendoUI Grid(Web框架).正在从本地json数据填充,该数据在页面加载时从ASP.NET MVC ViewBag加载.我在单元变量中声明数据源,然后网格被初始化并填充来自dataoruce的数据.我遇到过滤器菜单在首次过滤或清除后中断的问题(查看图像).每次我点击过滤器或清除按钮,它会隐藏更多的控件,直到只剩下两个按钮.奇怪的是,控制台中没有报告错误.我一直在处理这个问题超过一个星期,但我似乎找不到任何信息,也没有越来越接近可能的解决方案.

我知道非英语代码可能很难理解,但我很乐意翻译和解释这是什么意思!

不幸的是,我不能提供一个链接到这个页面正在运行的服务器,因为它需要登录,并且页面已经被释放部署,这意味着将公钥放在公共场合不是一个好主意.虽然我一直在努力把一个工作的小提琴组合在一起,但是我一直没能使它奏效.

我正在使用这段代码

root.seznamDataSource = new kendo.data.DataSource({
  data: zahteveData,pageSize: 15,schema: {
    model: {
      fields: {
        IdZahteve: {
          type: "number"
        },Naslov: {
          type: "string"
        },Datum: {
          type: "date"
        },Status: {
          type: "string"
        },Narocnik: {
          type: "string"
        },PoslovniPartner: {
          type: "string"
        }
      }
    }
  },change: function(e) {
    var urejeniItemi;
    if ((e.sender._sort != null) 
       && (e.sender._sort[0] != null) 
       && e.sender._sort[0].field === "Status") {
      e.preventDefault();
      urejeniItemi = [];
      return $.getJSON("/Zahteve/StatusiData",function(data) {
        var item,status,_i,_j,_len,_len1,_ref;
        for (_i = 0,_len = data.length; _i < _len; _i++) {
          status = data[_i];
          _ref = e.items;
          for (_j = 0,_len1 = _ref.length; _j < _len1; _j++) {
            item = _ref[_j];
            if (item.Status.trim().toLowerCase() === status.Opis.trim().toLowerCase()) {
              urejeniItemi.push(item);
            }
          }
        }
        if (urejeniItemi.length !== e.items.length) {
          console.log("napaka,niso urejeni vsi itemi");
          return;
        }
        if (e.sender._sort[0].dir === "desc") {
          urejeniItemi.reverse();
          return e.items = urejeniItemi;
        }
      });
    }
  }
});

我已经注册了更改事件侦听器,以便我可以应用特定的排序.数据源初始化后,我开始启动KendoUI Grid的初始化:

$("#odprte-zahteve").kendoGrid({
  dataSource: root.seznamDataSource,columns: [
    {
      template: '<span data-idZahteve="#=IdZahteve#"></span>#=Naslov#',field: "Naslov",title: "Naslov zahteve",attributes: {
        style: "min-width: 110px!importnat; text-indent: 10px;"
      },filterable: {
        ui: naslovFilter
      }
    },{
      field: "Datum",title: "Datum zahteve",format: "{0: dddd,dd. MMMM 'yy}",attributes: {
        style: "min-width: 105px!importnat;"
      },filterable: {
        extra: true,ui: function(element) {
          element.kendoDatePicker({
            depth: "month",max: new Date(),format: "dddd,d. MMMM yyyy",ARIATemplate: "#=datumZImenom(data.current)#",footer: "Danes - #=datumZImenom(data)#"
          });
        }
      }
    },{
      field: "Status",title: "Status",attributes: {
        style: "min-width: 60px!importnat;"
      },filterable: {
        ui: statusFilter
      }
    },{
      field: "Narocnik",title: "Naročnik",attributes: {
        style: "min-width: 80px!importnat;"
      },filterable: {
        ui: narocnikFilter
      }
    },{
      field: "PoslovniPartner",title: "Poslovni partner",attributes: {
        style: "min-width: 100px!importnat;"
      },filterable: false,sortable: false
    }
  ],change: function(e) {
    return urediZahtevo(getIzbranaZahteva(this));
  },dataBound: prilagodiSirino,selectable: true,sortable: true,pageable: {
    buttonCount: 5,pageSizes: [15,30,45],messages: {
      display: "Prikazujem {0} - {1} od {2} odprtih zahtev",empty: "Ni podatkov",itemsPerPage: "zahtev na stran",next: "Pojdi na naslednjo stran",first: "Pojdi na prvo stran",prevIoUs: "Pojdi na prejšnjo stran",last: "Pojdi na zadnjo stran",refresh: "Osvežite tabelo"
    }
  },filterable: {
    extra: false,operators: {
      string: {
        eq: "Je enak",startswith: "Se začne z",contains: "Vsebuje"
      },date: {
        lt: "Pred datumom",gt: "Po datumu",eq: "Je enak datumu"
      }
    },messages: {
      and: "in",or: "ali",filter: "Filtriraj",clear: "Počisti",info: "Filtriraj po: ",selectValue: "Izberite kategorijo"
    }
  }
});

过滤器ui功能只是创建基本的过滤器菜单

naslovFilter = function(element) {
    element.kendoAutoComplete({
        dataSource: zahteveData,dataTextField: "Naslov"
    });
};

datumFilter = function(element) {
    element.kendoDatePicker({
        depth: "month",footer: "Danes - #=datumZImenom(data)#"
    });
};

statusFilter = function(element) {
    var item,statusi,_len;
    statusi = [];
    for (_i = 0,_len = zahteveData.length; _i < _len; _i++) {
        item = zahteveData[_i];
        status = item.Status.trim();
        if (!statusi.contains(status)) {
            statusi.push(status);
        }
    }
    element.kendoDropDownList({
        dataSource: statusi,optionLabel: "Izberite status"
    });
};

narocnikFilter = function(element) {
    element.kendoDropDownList({
        dataSource: narocniki,optionLabel: "Izberite naročnika"
    });
};

编辑:我已经开始在这个项目上工作了,经理决定彻底重新设计,所以现在我使用BootstrapAngular.js,这不需要使用KendoUI.

解决方法

从我所看到的,这似乎是一个显示问题.看来,在代码中的几个地方,重要的是拼写为!importnat,这可能意味着问题只是一个CSS问题.没有一个工作的演示,一个不能确定,但​​我一定会从纠正这个错误开始.
原文链接:https://www.f2er.com/js/152147.html

猜你在找的JavaScript相关文章