2015-09-07 49 views
0

在创建具有非常酷选项的表格单元格时,我需要采取两个步骤。首先,我创建表格单元格作为JavaScript中的所有'正常'功能的DOM对象,就像它是一个复选框,一个选择,一个输入,一个链接等。 然后我需要把表格放在页面上做下一步,我认为jqueryui的自动完成和日期选择等高级功能。有这些下降的用户真棒。在元素呈现之前设置jqueryui

我确实有这个工作,但是,我确实需要打两个电话。首先创建TableCell,然后渲染,然后我需要再次调用postRenderTableFunctions以获取自动完成功能。所以问题是,为什么第二次调用,jqueryui不会在第一次调用时起作用。您可以在输入创建中看到注释部分,我试图让自动完成工作。

function createTableCell(name, td_def) 
{   
     var cell=document.createElement('td'); 
     if(td_def['type'] == 'date') 
     { 
      var element = document.createElement('input'); 
      element.name = name; 
      element.id = name;    
      cell.appendChild(element); 

      $('#' + element.id).datepicker(     
      { 
       dateFormat: 'yy-mm-dd', 
       onSelect: function() 
       { 
        $(this).focus(); 
       }, 
       onClose: function (dateText, inst) 
       { 
        $(this).select(); 
       } 
      }); 

     } 
     else if(td_def['type'] == 'checkbox') 
     { 


      element = document.createElement('input'); 
      element.type = 'checkbox'; 
      element.name = name; 
      element.id = name; 
      /*if(this.tdo[r][td_def['db_field']]['data'] == 1) 
      { 
       element.checked = true; 
      }*/ 
      cell.appendChild(element);  



     } 
     else if (td_def['type'] == 'select') 
     { 
      element = document.createElement('select'); 
      element.name = name; 
      element.id = name; 
      var option = document.createElement('option'); 
      option.value = 'NULL'; 
      option.appendChild(document.createTextNode("Select...")); 
      element.appendChild(option); 
      for (var j in td_def['select_names']) 
      { 
       option = document.createElement('option'); 
       option.value = td_def['select_values'][j]; 
       option.appendChild(document.createTextNode(td_def['select_names'][j])); 
       element.appendChild(option); 
      } 
      cell.appendChild(element); 
     } 
     else if (td_def['type'] == 'tree_select') 
     { 
      element = document.createElement('select'); 
      element.id = name; 
      element.name = name; 


      var option = document.createElement('option'); 
      option.value = 'NULL'; 
      option.appendChild(document.createTextNode("Select...")); 
      element.appendChild(option); 
      var level = 0; 
      //console.log(td_def['select_array']); 
      this.addNestedSelectOptions(element, td_def['select_array'], level); 




      if (typeof td_def['properties'] !== 'undefined') 
      { 
       for (var index in td_def['properties']) 
       { 
        eval('element.' + index + '= ' + td_def['properties'][index] + ';'); 

       } 
      } 
      cell.appendChild(element); 
     }    
     else if (td_def['type'] == 'input') 
     { 
      element = document.createElement('input'); 
      element.type = 'text'; 
      element.id = name; 
      element.name = name; 
      cell.appendChild(element); 
      /*  
      if(typeof td_def['autoComplete'] != 'undefined') 
      { 

       console.log('attempting Autocomplete'); 
       $("#" + name).autocomplete({ 
        source: function(request, response) 
        { 
        $.ajax(
        { 
          url: td_def['autoComplete']['url'], 
          type: 'GET', 
          async: true, 
          data: 
          { 
           ajax_request: td_def['autoComplete']['ajax_request'], 
           featureClass: "P", 
           style: "full", 
           maxRows: 12, 
           search_terms: request.term 
          }, 
          success: function(data) 
          { 
           console.log(data); 
           parsed_autocomplete_data = parseJSONdata(data); 
           response(parsed_autocomplete_data); 
          } 
         }); 
        }, 
        search: function() 
        { 
         // custom minLength 
         var term = this.value; 
         //console.log(term); 
         if(typeof td_def['minLength'] != 'undefined') 
         { 
          var minL = td_def['minLength']; 
         } 
         else 
         { 
          var minL = 1; 
         } 
         if (term.length < minL) 
         { 
          return false; 
         } 
        }, 
        focus: function() 
        { 
        // prevent value inserted on focus 
         return false; 
        }, 
        open: function(event, ui) 
        { 
         var dialog = $(this).closest('.ui-dialog'); 
         if(dialog.length > 0){ 
          $('.ui-autocomplete.ui-front').zIndex(dialog.zIndex()+1); 
         } 
        }, 
        select: function(event, ui) 
        { 
         selected_autocomplete_index = $.inArray(ui.item.value, parsed_autocomplete_data); 
        } 
       }); 
      } 
      */ 

     } 
     else if (td_def['type'] == 'textarea') 
     { 
      element = document.createElement('TEXTAREA'); 
      element.id = name; 
      element.name = name; 
      cell.appendChild(element); 

     } 
     else if (td_def['type'] == 'td') 
     { 

      cell.innerHTML = 'TBD'; 
      cell.name = name; 
      cell.id = name; 

     } 
     else 
     { 
      alert(td_def['type'] + ' have not coded that.....'); 
     } 

     return cell; 

     function addNestedSelectOptions(element, category_array, level) 
     { 
      for (var key in category_array) 
      { 
       option = document.createElement('option'); 
       option.value = key; 
       name = category_array[key]['name']; 


       for(i=0;i<level;i++) 
       { 
        name = "\u00A0" + name; 
        name = "\u00A0" + name; 
       } 
       option.appendChild(document.createTextNode(name)); 
       element.appendChild(option); 
       if(!$.isEmptyObject(category_array[key]['children'])) 
       { 
        addNestedSelectOptions(element, category_array[key]['children'], level+1); 
       } 
      } 
     } 

} 
//this function needs to be called separately. 
function postRenderTableFunctions(table_div_id, table_def) 
{ 
    //extra jquery functionality -- needs to go after stuff is rendered 
    for(var i=0;i<table_def.length;i++) 
    { 
     if(typeof table_def[i]['autoComplete'] != 'undefined') 
     { 
      var id = table_div_id + '_' + table_def[i]['db_field']; 
      console.log(id); 
      //is the auto complete open? 
      /*$("#" + id).bind('autocompleteopen', function(event, ui) 
      { 
       $(this).data('is_open',true); 
      }); 

      $("#" + id).bind('autocompleteclose', function(event, ui) 
      { 
       $(this).data('is_open',false); 
      });*/ 
      /*$("#" + id).bind("keydown", function(event) 
      { 
       //what is this for ? 
       if (event.keyCode === $.ui.keyCode.TAB && $(this).data('is_open')) 
       { 
        event.preventDefault(); 
       } 
       if (event.keyCode === $.ui.keyCode.ENTER && !$(this).data('is_open')) 
       { 
        //do what? 
       } 
      });*/ 
      var i2 = i; 
      var me = table_def; 
      $("#" + id).autocomplete({ 
       source: function(request, response) 
       { 
       $.ajax(
       { 
         url: me[i2]['autoComplete']['url'], 
         type: 'GET', 
         async: true, 
         data: 
         { 
          ajax_request: me[i2]['autoComplete']['ajax_request'], 
          featureClass: "P", 
          style: "full", 
          maxRows: 12, 
          search_terms: request.term 
         }, 
         success: function(data) 
         { 
          console.log(data); 
          parsed_autocomplete_data = parseJSONdata(data); 
          response(parsed_autocomplete_data); 
         } 
        }); 
       }, 
       search: function() 
       { 
        // custom minLength 
        var term = this.value; 
        //console.log(term); 
        if(typeof table_def[i2]['minLength'] != 'undefined') 
        { 
         var minL = table_def[i2]['minLength']; 
        } 
        else 
        { 
         var minL = 1; 
        } 
        if (term.length < minL) 
        { 
         return false; 
        } 
       }, 
       focus: function() 
       { 
       // prevent value inserted on focus 
        return false; 
       }, 
       open: function(event, ui) 
       { 
        var dialog = $(this).closest('.ui-dialog'); 
        if(dialog.length > 0){ 
         $('.ui-autocomplete.ui-front').zIndex(dialog.zIndex()+1); 
        } 
       }, 
       select: function(event, ui) 
       { 
        selected_autocomplete_index = $.inArray(ui.item.value, parsed_autocomplete_data); 
       } 
      }); 
     } 
    } 
} 
+0

我怀疑我可能会工作,如果您替换'$(“#”+ name).autocomplete({'with'$(element).autocomplete({'虽然我目前没有测试它的方法 –

+0

John看来你是对的,你能帮我理解为什么吗? – Iannazzi

回答

0

我对你的问题原始的评论 -

我想,如果你

$(element).autocomplete({ 

更换

$("#" + name).autocomplete({ 

虽然我现在还没有办法我可能会工作测试它。

我的响应 -

基本上使用$("#name")查找具有在DOM中ID name的元件。当您运行代码时element尚未添加到DOM中,因此自动完成功能无法附加到您的元素。

围绕着element$()将它转换为一个jQuery变量,您可以在添加到DOM之前附加自动完成。

+0

John C - 我觉得我的这个问题有同样的问题 - http://stackoverflow.com/questions/31973925/create-jquery-dialog-from-javascript -object - 我有div元素,所以让我看看是否可以在没有运行第二次init调用的情况下让对话框工作 – Iannazzi

相关问题