jQuery Easyui datagrid editor为combobox时指定数据源实例

前端之家收集整理的这篇文章主要介绍了jQuery Easyui datagrid editor为combobox时指定数据源实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

当在datagrid行内部应用添加编辑操作时,引入comboBox是非常方便的操作,我在引入comboBox时对数据源这快做个总结,在做demo的过程中遇到个问题,就是当你选择了下拉框的值后点击保存,此时显示的是value值,而不是text值,这时使用格式化函数解决此问题。

function unitformatter(value,rowData,rowIndex) {

if (value == 0) {

return;

}

for (var i = 0; i < Address.length; i++) {

if (Address[i].value == value) {

  return Address[i].text;

}

}

}

function GetTable() {

var editRow = undefined;

$("#Student_Table").datagrid({

height: 300,width: 450,title: '学生表',collapsible: true,singleSelect: true,url: '/Home/StuList',idField: 'ID',columns: [[

 { field: 'ID',title: 'ID',width: 100 },{ field: 'Name',title: '姓名',width: 100,editor: { type: 'text',options: { <a href="/tag/required/" target="_blank" class="keywords">required</a>: true } } },{ field: 'Age',title: '年龄',align: 'center',{ field: 'Address',title: '地址',formatter: unitformatter,editor: { type: 'combo<a href="/tag/Box/" target="_blank" class="keywords">Box</a>',options: { data: Address,valueField: "value",textField: "text" } } }

]],toolbar: [{

  text: '<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>',iconCls: 'icon-add',handler: function () {

    if (editRow != undefined) {

      $("#Student_Table").datagrid('endEdit',editRow);

    }

    if (editRow == undefined) {

      $("#Student_Table").datagrid('insertRow',{

        index: 0,row: {}

      });

      $("#Student_Table").datagrid('beginEdit',0);

      editRow = 0;

    }

  }

},'-',{

  text: '保存',iconCls: 'icon-save',handler: function () {

    $("#Student_Table").datagrid('endEdit',editRow);

    //如果<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>acceptChanges(),使用getChanges()则<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>不到编辑和新增的数据。

    //使用JSON序列化datarow对象,发送到<a href="/tag/houtai/" target="_blank" class="keywords">后台</a>。

    var rows = $("#Student_Table").datagrid('getChanges');

    var rowstr = JSON.stringify(rows);

    $.post('/Home/Create',rowstr,function (data) {

    });

  }

},{

  text: '撤销',iconCls: 'icon-redo',handler: function () {

    editRow = undefined;

    $("#Student_Table").datagrid('rejectChanges');

    $("#Student_Table").datagrid('unselectAll');

  }

},{

  text: '<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>',iconCls: 'icon-remove',handler: function () {

    var row = $("#Student_Table").datagrid('getSelections');

  }

},{

  text: '<a href="/tag/xiugai/" target="_blank" class="keywords">修改</a>',iconCls: 'icon-edit',handler: function () {

    var row = $("#Student_Table").datagrid('getSelected');

    if (row != null) {

      if (editRow != undefined) {

        $("#Student_Table").datagrid('endEdit',editRow);

      }

      if (editRow == undefined) {

        var index = $("#Student_Table").datagrid('getRowIndex',row);

        $("#Student_Table").datagrid('beginEdit',index);

        editRow = index;

        $("#Student_Table").datagrid('unselectAll');

      }

    } else {

    }

  }

},{

  text: '上移',iconCls: 'icon-up',handler: function () {

    MoveUp();

  }

},{

  text: '下移',iconCls: 'icon-down',handler: function () {

    MoveDown();

  }

}],onAfterEdit: function (rowIndex,changes) {

  editRow = undefined;

},onDblClickRow: function (rowIndex,rowData) {

  if (editRow != undefined) {

    $("#Student_Table").datagrid('endEdit',editRow);

  }

  if (editRow == undefined) {

    $("#Student_Table").datagrid('beginEdit',rowIndex);

    editRow = rowIndex;

  }

},onClickRow: function (rowIndex,editRow);

  } 

}

});

}

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的jQuery相关文章