1 line
17 KiB
JavaScript
1 line
17 KiB
JavaScript
(function(){function a(e){if((typeof e.length!=="number")||e.length===0){return[]}var d=[];for(var c in e[0]){d.push({headerText:c,headerTextTrans:c,rowText:c,columnType:c,width:c,sortable:c})}return d}ko.simpleGrid={viewModel:function(d){var c=this;c.sideNumber=3;c.midNumber=1+2*c.sideNumber;c.allNumber=c.midNumber+2;c.showMenu=false;c.className="table table-striped table-hover ko-grid colorHoverTable "+(d.tableClass?d.tableClass:"");c.ellipsisLength=16;c.searchInitStatus=ko.observable();c.searchKey=ko.observable();c.searchColumns=d.searchColumns;c.primaryColumn=d.primaryColumn;c.showPager=!!d.showPager;c.sortField=ko.observable(d.defaultSortField);c.sortDirection=ko.observable(d.defaultSortDirection);c.data=ko.observableArray(d.data);c.pageToGo=ko.observable();c.sortedData=ko.computed(function(){var f=c.sortField();var e=c.sortDirection();if(f&&e){return c.data().sort(function(h,g){return e=="ASC"?h[f].localeCompare(g[f]):g[f].localeCompare(h[f])})}else{return c.data()}});c.checkedCount=ko.observable(0);c.translate=function(){$(".ko-grid").translate();if($("#pblist tr").length>0){$("#pblist-checkall").removeClass("disable")}else{$("#pblist-checkall").addClass("disable")}};c.clearCheck=function(){$("#ko_grid_checkAll").removeAttr("checked");$("#pblist-checkall").removeClass("checkbox_selected");$("p:checkbox[target='pblist-checkall']").removeAttr("checked");$("p[id^='chk__'] ").removeClass("checkbox_selected");$("p[id^='chk__'] :checkbox").removeAttr("checked");c.checkedCount(0);c.translate()};c.searchText=ko.computed(function(){c.clearCheck();var e="";if(!c.searchInitStatus()){e=$.trim(c.searchKey())}return e});c.afterSearchData=ko.computed(function(){var e=$.trim(c.searchText()).toLowerCase();if(e==""){return c.sortedData()}else{return _.filter(c.sortedData(),function(h){for(var g=0;g<c.searchColumns.length;g++){var f=c.searchColumns[g];if(h[f].toLowerCase().indexOf(e)!=-1){return true}}return false})}});c.currentPageIndex=ko.observable(0);c.pageSize=d.pageSize||5;c.columns=d.columns||a(ko.utils.unwrapObservable(c.afterSearchData()));c.rowClickHandler=d.rowClickHandler;c.hasRowClickHandler=!!d.rowClickHandler;c.deleteHandler=d.deleteHandler;c.idName=d.idName;c.tmplType=d.tmplType;c.changeTemplateHandler=d.changeTemplateHandler;c.maxPageIndex=ko.computed(function(){return Math.ceil(ko.utils.unwrapObservable(c.afterSearchData()).length/c.pageSize)-1});c.radioClickExtend=d.radioClickHandler;c.radioChecked4Column=d.radioChecked4Column;c.radioChecked4Value=d.radioChecked4Value;c.fixCurrentPageIndex=function(f){if(f<0){return 0}var e=c.maxPageIndex();return f>e?e:f};c.pagerStart=ko.computed(function(){var e=c.fixCurrentPageIndex(c.currentPageIndex());var f=c.maxPageIndex();var g=0;if(e<c.midNumber||f<=c.allNumber){g=1}else{if(e+c.sideNumber>=f){g=f-c.midNumber}else{g=e-c.sideNumber}}return g});c.pagerEnd=ko.computed(function(){var e=c.fixCurrentPageIndex(c.currentPageIndex());var f=c.maxPageIndex();var g=0;if(e+c.sideNumber>=f||f<=c.allNumber){g=f-1}else{if(e<c.midNumber){g=c.midNumber}else{g=e+c.sideNumber}}if(f-g==2){g=f-1}return g});c.itemsOnCurrentPage=ko.computed(function(){c.translate();var e=c.fixCurrentPageIndex(c.currentPageIndex());var f=c.pageSize*e;return c.afterSearchData().slice(f,f+c.pageSize)});c.changePage=function(e){var e=c.fixCurrentPageIndex(e);c.currentPageIndex(e);c.clearCheck()};c.nextPage=function(){var e=c.fixCurrentPageIndex(c.currentPageIndex()+1);c.currentPageIndex(e);c.clearCheck()};c.previousPage=function(){var e=c.fixCurrentPageIndex(c.currentPageIndex()-1);c.currentPageIndex(e);c.clearCheck()};c.clearAllChecked=function(){$("#pblist-checkall").trigger("click");if($("#pblist-checkall").hasClass("checkbox_selected")){$("#pblist-checkall").trigger("click")}};c.clickCheckAll=function(){if($("#pblist-checkall").hasClass("checkbox_selected")){c.checkedCount(0)}else{var e=$("#pblist :checkbox").length;c.checkedCount(e)}};c.clickCheck=function(e){var g=$("#chk__"+e+" :checkbox");if(g.attr("checked")){g.removeAttr("checked")}else{g.attr("checked","checked")}checkCheckbox(g);var f=$("#pblist p.checkbox_selected :checkbox").length;c.checkedCount(f)};c.selectedItems=function(g){var f;f=$("#pblist :checkbox[checked='checked']");var e=[];if(g=="primary"){f.each(function(){e.push($(this).attr("primaryValue"))})}else{f.each(function(){e.push($(this).val())})}return e};c.selectedIds=function(){return c.selectedItems("id")};c.selectedPrimaryValue=function(){return c.selectedItems("primary")};c.radioSelectValue=function(){if($.browser.msie&&event&&event.srcElement&&event.srcElement.type=="radio"){return event.srcElement.value}return $("#pblist [name='ko_grid_radio']:checked").val()};c.radioSelectedPrimaryValue=function(){if($.browser.msie&&event&&event.srcElement&&event.srcElement.type=="radio"){return event.srcElement.attribute("primaryValue")}return $("#pblist [name='ko_grid_radio']:checked").attr("primaryValue")};c.radioClick=function(){c.checkedCount(c.checkedCount()+1)};c.clearRadioSelect=function(){$("#pblist [name='ko_grid_radio']:checked").removeAttr("checked");c.checkedCount(0)};c.setRadioSelect=function(e){$("#pblist [name='ko_grid_radio'][value='"+e+"']").attr("checked","checked");c.checkedCount(1)};c.sort=function(g){if(g==undefined){return}var f=c.sortField();var e="ASC";if(g==f){e=(c.sortDirection()=="ASC")?"DESC":"ASC"}c.sortField(g);c.sortDirection(e);c.data(c.data().sort(function(i,h){return e=="ASC"?i[g].localeCompare(h[g]):h[g].localeCompare(i[g])}));c.currentPageIndex(0);c.clearCheck();$(".ko-grid thead th.ko-grid-th-asc").removeClass("ko-grid-th-asc").addClass("ko-grid-th-sortable");$(".ko-grid thead th.ko-grid-th-desc").removeClass("ko-grid-th-desc").addClass("ko-grid-th-sortable");if(e=="ASC"){$("#ko_grid_th_"+g).removeClass().addClass("ko-grid-th-asc")}else{$("#ko_grid_th_"+g).removeClass().addClass("ko-grid-th-desc")}};c.ellipsisText=function(f){if(!f){return""}if((f.length*2)<c.ellipsisLength){return f}var e=0;for(var g=0;g<f.length;g++){if(f.charCodeAt(g)>256){e+=2}else{e++}if(e>=c.ellipsisLength){return f.substring(0,g)+"..."}}return f}}};var b=new ko.nativeTemplateEngine();b.addTemplate=function(c,d){if($("#"+c)[0]){$("#"+c).remove()}$("#container").append("<script type='text/html' id='"+c+"'>"+d+"<\/script>")};ko.bindingHandlers.simpleGrid={init:function(d,e){var c=e();if(c.rowClickHandler==undefined){c.rowClickHandler=function(){}}if(c.deleteHandler==undefined){c.deleteHandler=function(){}}if(c.radioClickExtend==undefined){c.radioClickHandler=function(){c.radioClick();return true}}else{c.radioClickHandler=function(){c.radioClick();c.radioClickExtend();return true}}ko.utils.arrayMap(c.columns,function(f){if(f.columnType==undefined){f.columnType="text"}if(f.sortable==undefined){f.sortable=false}if(f.headerTextTrans==undefined){f.headerTextTrans=""}if(f.display==undefined){f.display=true}if(f.needTrans==undefined){f.needTrans=false}});if(c.tmplType=="card"){b.addTemplate("ko_simpleGrid_grid"," <div class='ko-grid-container'> <div class='ko-grid-menu' data-bind='visible:showMenu'> <div class='ko-grid-option'> <img id='ko_grid_layout' class='cursor-pointer' src='pic/res_list.png' data-bind='click:changeTemplateHandler'/> <p id=\"pblist-checkall\" target=\"pblist\" class=\"checkbox checkboxToggle\"> <input type='checkbox' id='ko_grid_checkAll' data-bind='visible: tmplType==\"card\"&&data().length>0,click: clickCheckAll' /> </p> </div> <div class='clean'></div> </div> <div id=\"pblist\" class=\"ko-grid\" data-bind=\"foreach: itemsOnCurrentPage\"> <div class=\"ko-grid-card\" > <div class=\"ko-grid-card-content\" data-bind=\"foreach: $parent.columns ,click:function(){$root.rowClickHandler($data[$root.idName])}\"> <!-- ko if: display==true --> <p data-bind=\"attr:{title:typeof rowText == 'function' ? rowText($parent) : $parent[rowText]},text: $root.ellipsisText(typeof rowText == 'function' ? rowText($parent) : $parent[rowText])\"></p> <!-- /ko --> </div> <div class=\"ko-grid-card-delete\" data-bind=\"click:function(){$root.deleteHandler($data[$root.idName]);}\" >×</div> <div class=\"ko-grid-card-check\" ><p class=\"checkbox\"><input type='checkbox' data-bind='value: $data[$root.idName],attr:{primaryValue:$data[$root.primaryColumn]}' target=\"pblist-checkall\"/></p></div> </div> <div> </div>")}else{b.addTemplate("ko_simpleGrid_grid"," <div class='ko-grid-container'> <div class='ko-grid-menu' data-bind='visible:showMenu'> <div class='ko-grid-option'> <img id='ko_grid_layout' class='cursor-pointer' src='pic/res_card.png' data-bind='click:changeTemplateHandler'/> </div> <div class='clean'></div> </div> <table data-bind=\"attr:{'class':className}\" cellspacing=\"0\" cellspadding='0'> <thead> <tr data-bind=\"foreach: columns\" > <!-- ko if: columnType=='checkbox' --> <th data-bind='attr:{width:width}, visible: display'> <p id=\"pblist-checkall\" target=\"pblist\" class=\"checkbox checkboxToggle\" data-bind='click:$root.clickCheckAll'> <input type='checkbox' id='ko_grid_checkAll'/> </p> </th> <!-- /ko --> <!-- ko if: columnType=='text' || columnType=='image' --> <!-- ko if: sortable==true --> <th data-bind=\"visible: display, css: {'ko-grid-th-sortable':rowText!=$root.sortField(),'ko-grid-th-desc':(rowText==$root.sortField() && 'DESC'==$root.sortDirection()),'ko-grid-th-asc': (rowText==$root.sortField() && 'ASC'==$root.sortDirection())},attr:{id:'ko_grid_th_'+rowText,width:width},click:function(event,data){$root.sort(rowText)}\"><a href='#' data-bind=\"attr:{'data-trans': headerTextTrans}\"></a></th> <!-- /ko --> <!-- ko if: sortable==false --> <th nowrap='nowrap' data-bind=\"visible: display, attr:{width:width,'data-trans': headerTextTrans}\"></th> <!-- /ko --> <!-- /ko --> <!-- ko if: columnType=='radio' --> <th nowrap='nowrap' data-bind=\"visible: display, attr:{width:width,'data-trans': headerTextTrans}\"></th> <!-- /ko --> <!-- ko if: columnType=='button' --> <th nowrap='nowrap' data-bind=\"visible: display, attr:{width:width,'data-trans': headerTextTrans}\"></th> <!-- /ko --> </tr> </thead> <tbody id=\"pblist\" data-bind=\"foreach: itemsOnCurrentPage\"> <tr data-bind=\"foreach: $parent.columns,css:{'odd': $index() % 2==1,'even':$index()%2==0 } \"> <!-- ko if: columnType=='checkbox' --> <td class = 'ko-grid-center'><p class=\"checkbox\" manualControl='true' data-bind='attr:{id:\"chk__\"+ $parent[rowText]},click:function(){$root.clickCheck($parent[rowText])}'><input type='checkbox' data-bind='value: $parent[rowText],attr:{primaryValue:$parent[$root.primaryColumn]}' target=\"pblist-checkall\"/></p></td> <!-- /ko --> <!-- ko if: columnType=='radio' --> <td class = 'ko-grid-center'><input type='radio' name='ko_grid_radio' data-bind='click:$root.radioClickHandler,value: $parent[rowText],attr:{primaryValue:$parent[$root.primaryColumn]}'/></td> <!-- /ko --> <!-- ko if: columnType=='text' && !needTrans --> <td class = 'ko-grid-center' data-bind=\"visible: display, css:{'cursor-pointer':$root.hasRowClickHandler },text: typeof rowText == 'function' ? rowText($parent) : $parent[rowText], click:function(){$root.rowClickHandler($parent[$root.idName])}\"></td> <!-- /ko --> <!-- ko if: columnType=='text' && needTrans --> <td class = 'ko-grid-center' data-bind=\"visible: display, css:{'cursor-pointer':$root.hasRowClickHandler },click:function(){$root.rowClickHandler($parent[$root.idName])}\"> <span data-bind=\"attr: {'data-trans': $parent[rowText]}\"></span> </td> <!-- /ko --> <!-- ko if: columnType=='image' --> <td class = 'ko-grid-center' data-bind=\"visible: display, css:{'cursor-pointer':$root.hasRowClickHandler },click:function(){$root.rowClickHandler($parent[$root.idName])}\"> <img data-bind=\"attr: {src: $parent[rowText]}\"/> </td> <!-- /ko --> <!-- ko if: columnType=='button' --> <td class = 'ko-grid-center' data-bind=\"visible: display\"><input type=\"button\" class=\"btn-1 btn-ex\" data-bind=\"visible:$parent['btnDisplay'],enable:$parent['enabled'],attr:{'data-trans':$parent['actionTrans']},click:$parent['action']\"/></td> <!-- /ko --> </tr> </tbody> </table> </div>")}b.addTemplate("ko_simpleGrid_pageLinks"," <div class=\"ko-grid-pageLinks\"> <a class='ko-grid-pager' href='javascript:void(0)' data-bind=\"click:previousPage,enable:$root.fixCurrentPageIndex($root.currentPageIndex())>0,visible:$root.afterSearchData().length>0,css:{'ko-grid-pager-disabled': $root.fixCurrentPageIndex($root.currentPageIndex())==0}\"><<</a> <a href='javascript:void(0)' data-bind=\"visible:$root.afterSearchData().length>0,text: 1, click: function() { $root.changePage(0); }, css: {'ko-grid-pager-selected': 0 == $root.fixCurrentPageIndex($root.currentPageIndex()),'ko-grid-pager':0 != $root.fixCurrentPageIndex($root.currentPageIndex()) }\"></a> <span data-bind='visible:pagerStart()>2'>...</span> <!-- ko foreach: ko.utils.range(pagerStart,pagerEnd) --> <a href='javascript:void(0)' data-bind=\"text: $data + 1, click: function() { $root.changePage($data); }, disable:$data == $root.fixCurrentPageIndex($root.currentPageIndex()) ,css: {'ko-grid-pager-selected': $data == $root.fixCurrentPageIndex($root.currentPageIndex()),'ko-grid-pager':$data != $root.fixCurrentPageIndex($root.currentPageIndex()) }\"></a> <!-- /ko --> <span data-bind='visible:pagerEnd()<maxPageIndex()-2'>...</span> <a href='javascript:void(0)' data-bind=\"visible:maxPageIndex()>0,text: maxPageIndex()+1, click: function() { $root.changePage(maxPageIndex());}, css: {'ko-grid-pager-selected': maxPageIndex() == $root.fixCurrentPageIndex($root.currentPageIndex()),'ko-grid-pager': maxPageIndex() != $root.fixCurrentPageIndex($root.currentPageIndex()) }\"></a> <a class='ko-grid-pager' href='javascript:void(0)' data-bind=\"click:nextPage,enable:$root.fixCurrentPageIndex($root.currentPageIndex())<maxPageIndex(),visible:$root.afterSearchData().length>0,css:{'ko-grid-pager-disabled': $root.fixCurrentPageIndex($root.currentPageIndex())==maxPageIndex()}\">>></a> <span style='display:none;'><span>(</span><span id='ko_simpleGrid_recordCount' data-bind='text:$root.afterSearchData().length'></span><span>)</span></span> <div class=\"input-group margin-left-10\" data-bind=\"visible:$root.afterSearchData().length>0\" style='width: 170px;'><label class=\"input-group-addon\" data-trans=\"page\"></label> <input id=\"ko-grid-input-page\" type=\"text\" data-bind=\"value:pageToGo,valueUpdate: 'afterkeydown'\" class=\"form-control\"/> <label class=\"input-group-addon cursorhand\" data-trans=\"go\" data-bind=\"click:function() { if(/^[0-9]+$/.test(pageToGo()) && (parseInt(pageToGo())-1) <= maxPageIndex() && (parseInt(pageToGo())-1) >= 0){$root.changePage(parseInt(pageToGo())-1); pageToGo(''); }} \"></label></div> </div>");return{controlsDescendantBindings:true}},update:function(e,h,d){var j=h(),g=d();while(e.firstChild){ko.removeNode(e.firstChild)}var c=g.simpleGridTemplate||"ko_simpleGrid_grid",i=g.simpleGridPagerTemplate||"ko_simpleGrid_pageLinks";var f=e.appendChild(document.createElement("DIV"));ko.renderTemplate(c,j,{templateEngine:b},f,"replaceNode");if(j.showPager){var k=e.appendChild(document.createElement("DIV"));ko.renderTemplate(i,j,{templateEngine:b},k,"replaceNode")}}}})(); |