2017-02-07 8 views
1

Я знаю, что это не ясно, но я покажу вам этот образ:Могу ли я автоматически установить текстовое поле js-GRID в соответствии с конкретным значением выбора?

Look at here

Я хочу, чтобы при выборе типа данных, чтобы определить текстовое поле DB данных в соответствии со следующим:

данных Тип - DB DataType

a. STRING - varchar (100)

b. INTEGER - int

c. LONG - BigInt

Например:

1) Когда я выбираю строку из типа данных, чтобы иметь возможность установить текстовое поле БД Тип данных к VARCHAR (100) или

2) Когда я выбираю число от Тип данных, чтобы можно было установить текстовое поле типа данных DB в int или

3) Когда я выбираю LONG из Data Type, чтобы установить текстовое поле DB Dataatype в 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- другой-клеточно-зависимый Colum –

ответ

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 } 
       ] 

     });