在JQ网格单元格标题内添加图标

Question

我需要在单元属性标题中显示2个图标，如下图所示， 点击图标需要执行一些操作。

设计：enter image description here

我尝试过：

colModel: [
                    //{name: 'id', index: 'id', width: 65, align: 'center', sorttype: 'int'},
                    {name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date',
                        formatter: 'date', formatoptions: {newformat: 'd-M-Y', reformatAfterEdit: true}, datefmt: 'd-M-Y'},
                    {name: 'name', index: 'name', width: 70,
                        cellattr: function (rowId, val, rawObject, cm, rdata) {
                            return 'title="<i class = fa fa-edit></i>"';
                        }}
]

在悬停细胞时没有获得字体真棒图标，而不是获取<i class = fa fa-edit></i>

虚拟开发屏幕： enter image description here

使用bootstrap 3.3.7和font awesome 4.7和Jquery UI css

如何添加图标..？

Answer 1

目前还不清楚您使用的是哪个版本的jqGrid，以及jqGrid（free jqGrid，商业Guriddo jqGrid JS或版本中的旧jqGrid＆lt; = 4.7）。目前还不清楚你使用哪个CSS框架：jQuery UI，Bootstrap或两者兼而有之。因此我想你使用jQuery UI。如果您需要使用tooltip以另一种方式显示const showDebug = false; const debugLog = function(){ if(showDebug){ console.log.apply(window,Array.from(arguments)); } } const isInSequence = checkFunction => (array,maxMissed) => { const recur = (missed,currentIndex,array) => {//compare lastIndex to next index debugLog("array:",array,"missed:",missed,"index:",currentIndex); if(currentIndex>=array.length-1) return true;//there is no next index to compare to var next = currentIndex+1; if(!checkFunction(array[next-1],array[next])){//compare debugLog("------------miss"); missed++ if(missed>maxMissed){ return false;//too many misses, return false } if(next>=array.length-1){ //compare to the last one failed, remove last array=array.slice(-1); }else if(currentIndex===0) { //There is no previous element from current so remove current array = array.slice(currentIndex+1); }else{ //try again with current or next element removed, if either returns true // then return true return recur( missed,0,array.slice(0,currentIndex).concat(array.slice(currentIndex+1)) ) || recur( missed,0,array.slice(0,next).concat(array.slice(next+1)) ) } next = 0; } //recursively call itself return recur(missed,next,array); } return recur(0,0,array); } const test = (expected,value,message) => (expected!==value) ? console.error("Failed, expected:",expected,"got:",value,"message:",message) : console.info("Passed:",message) ; console.clear(); //partially apply isInSequence with a function that takes 2 arguments // and checks if argument one is smaller than argument 2 const increasing = isInSequence((current,next)=>current<next); test(true,increasing([3,2,3],1),"3,2,3 should return true"); test(true,increasing([1,2,3],0),"1,2,3 should return true"); test(false,increasing([1,2,3,2],0),"1,2,3,2 should return false"); test(true,increasing([2,3],0),"2,3 should return true"); test(true,increasing([],0),"[] should return true"); test(true,increasing([2],0),"[2] should return true"); test(true,increasing([2,3,2],1),"2,3,2 should return true (can remove last one)"); test(true,increasing([2,1],1),"2,1 should return true (can miss one)"); test(false,increasing([1,2,1,3,2],1),"1,2,1,3,2 should return false (can only miss one)"); test(false,increasing([4,5,6,1,2,3],1),"4,5,6,1,2,3 should return false"); test(true,increasing([4,5,100,6,7],1),"4,5,100,6,7 should return true (remove 100 would work)"); test(false,increasing([5,1,5,2,3],1),"5,1,5,2,5,3 should return false"); test(true,increasing([1,2,0,3,2],2),"1,2,0,3,2 should return true (can miss two)"); test(false,increasing([3,2],0),"3,2 should return false"); // less performant version to fix this edge case (not your problem since only 1 can fail in your case) test(true,increasing([0,1,100,101,2,3,4,5],2),"0,1,100,101,2,3,4,5 should return true (can miss two)");信息。例如代码

title

在演示https://jsfiddle.net/OlegKi/yvbt6w54/60/中使用。结果如下图所示：