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

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

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

我正在使用这段代码:

root.seznamDatasource = new kendo.data.Datasource({
  data: zahteveData,pageSize: 15,scheR_299_11845@a: {
    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,@R_801_10288@ctable: 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: ",@R_801_10288@ctValue: "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问题.没有一个工作的演示,一个不能确定,但​​我一定会从纠正这个错误开始.

大佬总结

以上是大佬教程为你收集整理的javascript – KendoUI网格自定义过滤器菜单在第一次过滤或清除后中断全部内容,希望文章能够帮你解决javascript – KendoUI网格自定义过滤器菜单在第一次过滤或清除后中断所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。