How to add jqTree on jqGrid search form

Question

I use jqGrid on my page and use jqTree (https://mbraak.github.io) for Division property. On search form for the property I create jqTree element in that function:

var divisionTreeInit = function(elem)   {
        console.log("divisionTreeInit");
        var tmp=$(el).tree({
            data: divisionTreeJSON,
            autoOpen: 0,
        });
        $(el).on(
                'tree.click',
                function(event) {
                    console.log(event.node.id);
                    $(elem).val(event.node.id); 
                }
            );

        $(elem).parent().append(tmp);
        //$(elem).val("7");
        return elem;
    };

and sign that function in jqGrid model

colModel:[
            ....
            {name:'division',index:'division',width:180,  hidden:false,editable:true,formatter:divisionNameFormatter, edittype:'custom',editoptions: {size:100,custom_element: myelem, custom_value:myvalue},editrules:{edithidden:true,required:true},stype:"text",searchoptions:{sopt:['eq','ne'],dataInit:divisionTreeInit,}, searchrules:{required:true} },

So i have Search form. When i manualy type code of Division into input field it works fine. But when i choose Division from jqTree (and code value displayed in input field) search doesn't work. It looks like jqGrid can't see value in input field.

Maybe someone tell me why so?

Full code of my page

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"   pageEncoding="UTF-8"%>
<link rel="stylesheet" href="<c:url value="/css/mbraak-jqTree/jqtree.css" />">
<script src="<c:url value="/js/mbraak-jqTree/tree.jquery.debug.js" />"></script>

<script type="text/javascript">
$(document).ready(function(){
    var el = document.createElement("div");  el.id="tree"; //элемент, куда добавляем division
    var getDivisionTreeJSON = function() { //получаем с сервера division json
        var request = $.ajax({
            type: 'GET',
            async:false,
            url: '${curUrl}hardwareItem/divisionTreeNew',
        });
        var tree="";
        request.done(function(resp){
            tree=resp;
        });
      return tree;
    };
    var divisionTreeJSON = getDivisionTreeJSON();

    var selectedDivision=""; //храним выделеный division


    /*var hardwareTypeList = new Array(); 
    <c:forEach items="${hardwareTypeList}" var="s"> 
        hardware = new Object();
        hardware.name = "${s.name}"; 
        hardwareTypeList["${s.id}"]=hardware;
    </c:forEach>    

    var prepareList = function(list) { //преобразует
        let newObject={};
        for (let key in list) {
            newObject[key]=list[key].name;
        }
        return newObject;
    }
    var shortHardwareTypeList=prepareList(hardwareTypeList);*/
    var shortHardwareTypeList = new Object(); 
    <c:forEach items="${hardwareTypeList}" var="s"> 
        //hardware = new Object();
        //hardware.name = "${s.name}"; 
        shortHardwareTypeList["${s.id}"]="${s.name}";
    </c:forEach>

    //Собственная обработка ошибки
    var originalCheckValues = $.jgrid.checkValues;
    $.jgrid.checkValues = function(val, valref,g, customobject, nam) {
            var ret = originalCheckValues.call(this,val, valref,g, customobject, nam);
            if (!ret[0]) {
                $("tr#tr_"+valref+" td.CaptionTD").addClass("ui-state-error");
            } else {
                $("tr#tr_"+valref+" td.CaptionTD").removeClass("ui-state-error");
            } 
        return ret;
    };

    var dateFormat=$.datepicker.regional[mylocale()].dateFormat;
    var dateFormatter=function(cellvalue, options, rowObject) {      
        return $.datepicker.formatDate(dateFormat,new Date(cellvalue));
    };
    var checkDate=function(value, colname){
        try {
            $.datepicker.parseDate(dateFormat,value);
        } catch(e) {
            return [false,colname+', ' + dateFormat];
        }
        return [true,""];
        /* var a=value.match(/(\d{1,2})\.(\d{1,2})\.(\d{2,4})/);
        if (a==null) {
            return [false,colname+" должна быть в формате DD.MM.YYYY"];
        }
        return [true,""]; */
    };

    var datePick = function(elem)   {
       jQuery(elem).datepicker();
    };
    var divisionTreeInit = function(elem)   {

        console.log("divisionTreeInit");
        var tmp=$(el).tree({
            data: divisionTreeJSON,
            autoOpen: 0,
        });
        $(el).on(
                'tree.click',
                function(event) {
                    console.log(event.node.id);
                    $(elem).val(event.node.id);
                }
            );

        $(elem).parent().append(tmp);
        //$(elem).val("7");
        return elem;
    };


    var myelem = function(value, options) {
        console.log("myelem value:"+value);
        selectedDivision="";
        var tmp=$("#photos").getRowData(options.rowId).division;
        var division = tmp.split(":")[0];
        var divisionTree = $(el).tree({
            data: divisionTreeJSON,
            autoOpen: 0,
            //dragAndDrop: false,
            //selectable: true,
            onCanSelectNode: function(node) {
                if (node.children.length == 0) {
                    return true;
                }
                else {
                    return false;
                }
            }
        });
        divisionTree.on(
            'tree.click',
            function(event) {
                selectedDivision = event.node.id;
            }
        );
        var node = divisionTree.tree('getNodeById',division);
        divisionTree.tree('selectNode', node);
        return el;
    }

    var myvalue = function(elem, operation, value) {
        console.log("myvalue operation:"+operation+", value:"+value)
        if(operation === 'get') {
            return String(selectedDivision);
        }  
    }
    var hardwareTypeOptions = {
            size:1,
            value:shortHardwareTypeList,
            sopt:['eq','ne'],
    };

    var hardwareTypeFormatter = function(cellvalue, options, rowObject ){
        return cellvalue.name;
    }
    var ipAddrFormatter = function(cellvalue, options, rowObject ){
        return cellvalue.ipStr;
    }
    var divisionFormatter = function(cellvalue, options, rowObject ){
        console.log("divisionFormatter");
        return cellvalue.id;
    }
    var divisionNameFormatter = function(cellvalue, options, rowObject ){
        //console.log("divisionNameFormatter");
        //console.log(cellvalue);
        return cellvalue.id+":"+cellvalue.name;
    }

    var ipAddrInit=function(elem) {
        //console.log(elem);
        $(elem).mask('0ZZ.0ZZ.0ZZ.0ZZ', {
            translation: {
                'Z': {
                  pattern: /[0-9]/, optional: true
                }
              }
        });
    };
    $("#photos").jqGrid({
        height:"auto",
        autowidth:true,
        shrinkToFit:true,
        styleUI : "Bootstrap",
        url:url("/dataDirectory/hardwareItem/crud"),
        datatype: "json",
        loadError: function (jqXHR, textStatus, errorThrown) {
            console.log("loadError");
        }, 
        colNames:[
            '<spring:message code="Domain.HardwareItem.id"/>',
            '<spring:message code="Domain.HardwareItem.HardwareType"/>',
            '<spring:message code="Domain.HardwareItem.InventoryNumber"/>',
            '<spring:message code="Domain.HardwareItem.EntryDate"/>',
            '<spring:message code="Domain.HardwareItem.IpAddr"/>',
            '<spring:message code="Domain.HardwareItem.Description"/>',
            '<spring:message code="Domain.HardwareItem.Division"/>',


        ],
        colModel:[
            {name:'id',index:'id', width:50,key:true,search:false,editable:false, editoptions: { size: 10, readonly: 'readonly'}}, 
            {name:'hardwareType',width:180,index:'hardwareType', editable:true, edittype:'select',editoptions: hardwareTypeOptions ,stype:'select', searchoptions: hardwareTypeOptions, searchrules:{required:true},formatter: hardwareTypeFormatter,},
            {name:'inventoryNumber',index:'inventoryNumber',width:180,  editable:true, edittype:'text',editoptions: {size:100,}, searchrules:{required:true} },
            {name:'entryDate',index:'entryDate', width:80,editable: true,edittype: 'text',editoptions:{ dataInit :datePick}, formatter:dateFormatter,/* unformat:dateUnformatter,*/editrules:{custom:true,custom_func:checkDate},stype:"text",searchoptions:{ dataInit :datePick,sopt:['eq','ne','lt','le','gt','ge']},searchrules:{required:true,custom:true,custom_func:checkDate} },
            {name:'ipAddr',index:'ipAddr',width:180,  editable:true, edittype:'text',editoptions: {size:100}, searchrules:{required:true},searchoptions:{sopt:['eq','ne','lt','le','gt','ge'],dataInit:ipAddrInit},formatter: ipAddrFormatter,},
            {name:'description',index:'description',width:180,  editable:true, edittype:'text',editoptions: {size:100}, searchrules:{required:true} },
            {name:'division',index:'division',width:180,  hidden:false,editable:true,formatter:divisionNameFormatter, edittype:'custom',editoptions: {size:100,custom_element: myelem, custom_value:myvalue},editrules:{edithidden:true,required:true},stype:"text",searchoptions:{sopt:['eq','ne'],dataInit:divisionTreeInit,}, searchrules:{required:true} },

        ],

        jsonReader:{
            id:'id' 
        },
        rowNum:10,
        loadonce: false,
        rowList:[10,20,30],
        pager: '#pager2',
        sortname: 'id',
        viewrecords: true,
        toolbar:[true,"both"],
        sortorder: "asc",
        caption:'<spring:message code="Domain.HardwareItem"/>',
        cellEdit : false,
        editurl : url("/dataDirectory/hardwareItem/crud/do"),
    });


    var fn_formSubmit=function(response, postdata) { 
        var result = eval('(' + response.responseText + ')');
        var errors = "";
        if (!result.success) {
            for (var i = 0; i < result.message.length; i++) {
                    var tmp=result.message[i].split(";");
                    errors += tmp[1]+"<br>";
                    $("tr#tr_"+tmp[0]+" td.CaptionTD").addClass("ui-state-error");
                    //$("tr#tr_"+tmp[0]+" td.DataTD input").addClass("is-invalid");
                    //console.log($("tr#tr_"+tmp[0]+" td.DataTD input"));
            }
        } 
        //console.log(response.responseText);
        return [result.success,errors,null];
    };
    var beforeShowForm=function(form) {
        //console.log(form);
        //let id = $(form).find("select option:selected").val();
        $("input[name='ipAddr'].FormElement.form-control").mask('0ZZ.0ZZ.0ZZ.0ZZ', {
            translation: {
                'Z': {
                  pattern: /[0-9]/, optional: true
                }
              }
        });
    };  


    var editOptions={top: 50, left: "100", width: 500,closeOnEscape: true,closeAfterEdit:true,viewPagerButtons:false,savekey:[true,13],navkeys:[false,38,40], afterSubmit: fn_formSubmit,beforeShowForm:beforeShowForm};
    var addOptions={top: 50, left: "100", width: 500,closeOnEscape: true,closeAfterAdd:true, afterSubmit: fn_formSubmit,beforeShowForm:beforeShowForm};
    var delOptions={};
    var searchOptions={top: 50, left: "100", width: 500,closeOnEscape: true,closeAfterAdd:true, afterSubmit: fn_formSubmit,sopt:['eq','ne','bw','ew','cn'] };
    $("#photos").jqGrid('navGrid','#pager2',{edit:true,add:true,del:true,search:true,view:false,refresh:false},editOptions,addOptions,delOptions,searchOptions);
});
</script>   
    <table id="photos" class="display" cellspacing="0" width="100%">
    </table>
    <div id="pager2"></div>

I found a solution for the question. When you set value for the then, you should fire event "change" — Karabass, Mar 17 '20 at 01:09

How to add jqTree on jqGrid search form

0 Answers0