2017-02-07 4 views
1

나는 그것이 명확하지 않다 알고하지만 난 당신이 이미지를 보여특정 선택 값에 따라 js-GRID 텍스트 필드를 자동으로 설정할 수 있습니까?

Look at here

나는 다음에 따라 DB 데이터 텍스트 필드를 설정, 데이터 유형을 선택하면 내가 원하는 :

데이터 유형 - DB 데이터 유형

a. STRING - varchar (100)

b. INTEGER - int

c. 내가의 정수를 선택

1) 나는 데이터 형식에서 STRING을 선택하면 VARCHAR하기 위해 DB 데이터 유형의 텍스트 필드를 설정 할 수 있도록 (100) 또는

2) : - LONG BIGINT

예를 들어

DB 데이터 유형 텍스트 필드를 int 또는

으로 설정할 수있는 데이터 유형 3) 데이터 유형에서 LONG을 선택하여 DB 데이터 유형 텍스트 필드를 Bigint로 설정할 수 있습니다.

내 코드는 다음과 같다 :

$("#DataGrid").jsGrid({ 
       height: "100%", 
       width: "70%", 
       filtering: true, 
       editing: true, 
       inserting: true, 
       sorting: true, 
       paging: true, 
       autoload: true, 
       pageSize: 15, 
       pageButtonCount: 5, 
       datatype: "json", 
       deleteConfirm: "Do you really want to delete the row?", 
       controller: process_variables, 
       fields: [ 
        { name: "ID", align: "center", width: 10 }, 
        { name: "Name", validate: { message: "Field Name is required", validator: function(message) { return message; } }, align: "center", type: "text", width: 100 }, 
        { name: "Display Name", validate: { message: "Field Display Name is required", validator: function(message) { return message; } }, align: "center", type: "text", width: 100 }, 
        { name: "Data Type", validate: { message: "Field Data Type is required", validator: function(value) { return value != ""; } }, align: "center", type: "select", items: process_variables.dataType, valueField: "Name", textField: "Name", width: 45 }, 
        { name: "Initial Value", align: "center", type: "text", width: 40 }, 
        { name: "Initial State", validate: { message: "Field Initial State is required", validator: function(value) { return value != ""; } }, align: "center", type: "select", items: process_variables.initialState, valueField: "Name", textField: "Name", width: 40 }, 
        { name: "Worklist Order", align: "center", type: "number", width: 25 }, 
        { name: "DB Datatype", validate: { message: "Field DB Datatype is required", validator: function(message) { return message; } }, align: "center", type: "text", width: 45 }, 
        { name: "Allowed values", align: "center", type: "text", width: 100 }, 
        { type: "control", width: 25 } 
       ] 

     }); 

이 내 JS-GRID 데이터베이스입니다 :

(function() { 

    var total_data_ids = 8; 
    var process_variables = { 

     loadData: function(filter) { 
      return $.grep(this.clients, function(client) { 
       return (!filter.ID || client.ID.indexOf(filter.ID) > -1) 
        && (!filter.Name || client.Name.indexOf(filter.Name) > -1) 
        && (!filter.Displayed_name || client.Displayed_name.indexOf(filter.Displayed_name) > -1) 
        && (!filter.Data_type || client.Data_type === filter.Data_type) 
        && (!filter.Initial_value || client.Initial_value.indexOf(filter.Initial_value) > -1) 
        && (!filter.Initial_state || client.Initial_state === filter.Initial_state) 
        && (!filter.Worklist_order || client.Worklist_order === filter.Worklist_order) 
        && (!filter.process_variables_datatype || client.process_variables_datatype.indexOf(filter.process_variables_datatype) > -1) 
        && (!filter.Allowed_values || client.Allowed_values.indexOf(filter.Allowed_values) > -1); 
      }); 
     }, 

     insertItem: function(insertingClient) { 
      insertingClient.ID = total_data_ids; 
      this.clients.push(insertingClient); 
      $("#DataJson").html(JSON.stringify(this.clients)); 
      total_data_ids++; 

     }, 

     updateItem: function(updatingClient) { 
      $("#DataJson").html(JSON.stringify(this.clients)); 
     }, 

     deleteItem: function(deletingClient) { 
      var clientIndex = $.inArray(deletingClient, this.clients); 
      this.clients.splice(clientIndex, 1); 
      $("#DataJson").html(JSON.stringify(this.clients)); 
     } 

    }; 

    process_variables.dataType = [ 
     { Name: "STRING", Id: 0 }, 
     { Name: "INTEGER", Id: 1 }, 
     { Name: "DOUBLE", Id: 2 }, 
     { Name: "DATE", Id: 3 }, 
     { Name: "DATETIME", Id: 4 }, 
     { Name: "BOOLEAN", Id: 5 }, 
     { Name: "COMMENT", Id: 6 }, 
     { Name: "FILE", Id: 7 }, 
     { Name: "EMAIL_ADDRESS", Id: 8 }, 
     { Name: "AFM", Id: 9 }, 
     { Name: "ENTITY", Id: 10 }, 
     { Name: "LONG", Id: 11 } 
    ]; 

    process_variables.initialState = [ 
     { Name: "HIDE", Id: 0 }, 
     { Name: "READ ONLY", Id: 1 }, 
     { Name: "WRITE", Id: 2 }, 
     { Name: "WRITE REQUIRED", Id: 3 } 
    ]; 

    process_variables.clients = []; 

    window.process_variables = process_variables; 

}()); 
+0

이 도움이 될 http://stackoverflow.com/questions/30645088/jqgrid-change-values-of-editable-cell-on-change-of- :이 마법처럼 작동 최종 코드 다른 세포 의존성 칼럼 –

답변

1

이 상당히 어려웠다 그러나 나는 그것을 해결했습니다.

$("#DataGrid").jsGrid({ 
       height: "100%", 
       width: "70%", 
       filtering: true, 
       editing: true, 
       inserting: true, 
       sorting: true, 
       paging: true, 
       autoload: true, 
       pageSize: 15, 
       pageButtonCount: 5, 
       datatype: "json", 
       deleteConfirm: "Do you really want to delete the row?", 
       controller: process_variables, 
       fields: [ 
        { name: "ID", align: "center", width: 10 }, 
        { name: "Name", validate: { message: "Field Name is required", validator: function(message) { return message; } }, align: "center", type: "text", width: 100 }, 
        { name: "Display Name", validate: { message: "Field Display Name is required", validator: function(message) { return message; } }, align: "center", type: "text", width: 100 }, 
        { name: "Data Type", insertTemplate: function() { 
        var grid = this._grid; 
        var insertResult = jsGrid.fields.select.prototype.insertTemplate.call(this, arguments); 
        var defaultInsertValue = insertResult.val(); 
        //alert("i default timi einai: " + defaultInsertValue); 
        //alert(JSON.stringify(insertResult.val())); 

        insertResult.on("change", function() { 
        var selectedInsertValue = insertResult.val(); 
        //alert("i selected timi einai: " + selectedInsertValue); 
        var anotherInsertFieldIndex = 7; 
        if (selectedInsertValue == "STRING") grid.option("fields")[anotherInsertFieldIndex].insertControl.val("varchar(100)"); 
        else if (selectedInsertValue == "INTEGER") grid.option("fields")[anotherInsertFieldIndex].insertControl.val("int"); 
        else if (selectedInsertValue == "DOUBLE") grid.option("fields")[anotherInsertFieldIndex].insertControl.val("Real"); 
        else if (selectedInsertValue == "DATE") grid.option("fields")[anotherInsertFieldIndex].insertControl.val("Datetime"); 
        else if (selectedInsertValue == "DATETIME") grid.option("fields")[anotherInsertFieldIndex].insertControl.val("Datetime"); 
        else if (selectedInsertValue == "BOOLEAN") grid.option("fields")[anotherInsertFieldIndex].insertControl.val("varchar(5)"); 
        else if (selectedInsertValue == "COMMENT") grid.option("fields")[anotherInsertFieldIndex].insertControl.val("ntext"); 
        else if (selectedInsertValue == "FILE") grid.option("fields")[anotherInsertFieldIndex].insertControl.val("varchar(250)"); 
        else if (selectedInsertValue == "EMAIL_ADDRESS") grid.option("fields")[anotherInsertFieldIndex].insertControl.val("varchar(100)"); 
        else if (selectedInsertValue == "AFM") grid.option("fields")[anotherInsertFieldIndex].insertControl.val("varchar(100)"); 
        else if (selectedInsertValue == "ENTITY") grid.option("fields")[anotherInsertFieldIndex].insertControl.val("varchar(2000)"); 
        else if (selectedInsertValue == "LONG") grid.option("fields")[anotherInsertFieldIndex].insertControl.val("Bigint"); 
        }); 
        return insertResult; 
        }, editTemplate: function() { 
        var grid = this._grid; 
        var editResult = jsGrid.fields.select.prototype.editTemplate.call(this, arguments); 

        editResult.on("change", function() { 
        var selectedEditValue = editResult.val(); 
        var anotherEditFieldIndex = 7; 
        if (selectedEditValue == "STRING") grid.option("fields")[anotherEditFieldIndex].editControl.val("varchar(100)"); 
        else if (selectedEditValue == "INTEGER") grid.option("fields")[anotherEditFieldIndex].editControl.val("int"); 
        else if (selectedEditValue == "DOUBLE") grid.option("fields")[anotherEditFieldIndex].editControl.val("Real"); 
        else if (selectedEditValue == "DATE") grid.option("fields")[anotherEditFieldIndex].editControl.val("Datetime"); 
        else if (selectedEditValue == "DATETIME") grid.option("fields")[anotherEditFieldIndex].editControl.val("Datetime"); 
        else if (selectedEditValue == "BOOLEAN") grid.option("fields")[anotherEditFieldIndex].editControl.val("varchar(5)"); 
        else if (selectedEditValue == "COMMENT") grid.option("fields")[anotherEditFieldIndex].editControl.val("ntext"); 
        else if (selectedEditValue == "FILE") grid.option("fields")[anotherEditFieldIndex].editControl.val("varchar(250)"); 
        else if (selectedEditValue == "EMAIL_ADDRESS") grid.option("fields")[anotherEditFieldIndex].editControl.val("varchar(100)"); 
        else if (selectedEditValue == "AFM") grid.option("fields")[anotherEditFieldIndex].editControl.val("varchar(100)"); 
        else if (selectedEditValue == "ENTITY") grid.option("fields")[anotherEditFieldIndex].editControl.val("varchar(2000)"); 
        else if (selectedEditValue == "LONG") grid.option("fields")[anotherEditFieldIndex].editControl.val("Bigint"); 
        }); 
        return editResult; 
        }, validate: { message: "Field Data Type is required", validator: function(value) { return value != "Select"; } }, align: "center", type: "select", items: process_variables.dataType, valueField: "Name", textField: "Name", width: 45 }, 
        { name: "Initial Value", align: "center", type: "text", width: 40 }, 
        { name: "Initial State", validate: { message: "Field Initial State is required", validator: function(value) { return value != ""; } }, align: "center", type: "select", items: process_variables.initialState, valueField: "Name", textField: "Name", width: 40 }, 
        { name: "Worklist Order", align: "center", type: "number", width: 25 }, 
        { name: "DB Datatype", validate: { message: "Field DB Datatype is required", validator: function(message) { return message; } }, align: "center", type: "text", width: 45 }, 
        { name: "Allowed values", align: "center", type: "text", width: 100 }, 
        { type: "control", width: 25 } 
       ] 

     });