2017-02-07 11 views
1

私はそれが明確ではない知っているが、私はあなたにこの画像を表示:特定の選択値に従ってjs-GRIDテキストフィールドを自動的に設定できますか?

Look at here

私は以下によるDBデータのテキストフィールドを設定するには、データ型を選択したときに、私が欲しい:

データタイプ - DBデータタイプ

a。 STRING - varchar(100)

b。 INTEGER - int

c。 LONG - 例えばBIGINT

1)私は整数を選択するVARCHAR(100)または

2)にDBデータ型テキストフィールドを設定することができるようにデータ型から文字列を選択しますDBデータ型のテキストフィールドをintに設定できるデータ型または

3)DBTypeデータ型のテキストフィールドをBigintに設定できるようにするには、データ型からLONGを選択します。

私のコードは次のようである:

$("#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 } 
       ] 

     }); 
関連する問題