EasyUI DataGrid 可编辑列级联操作

 $(function () {var lastIndex;var $dg = $('#dg');$dg.datagrid({width : 600,height : 'auto',title : '可编辑列级联操作',singleSelect : true,idField : 'itemid',url : '/uploads/rs/233/bkf2ntm7/datagrid_data2.json',columns : [[{field : 'itemid',title : 'Item ID',width : 80}, {field : 'productid',title : 'Product ID',width : 120,formatter : productFormatter,editor : {type : 'combobox',options : {valueField : 'productid',textField : 'name',data : products,required : true,onChange : function (newValue, oldValue) {//重点在此处//先获取到当前选中行//根据当前行获取，当前行的下标//在根据下标和要获取列的filed获取对应filed的Editor对象//然后在根据对应的Editor操作var row = $dg.datagrid('getSelected');var rindex = $dg.datagrid('getRowIndex', row);var ed = $dg.datagrid('getEditor', {index : rindex,field : 'listprice'});$(ed.target).numberbox('setValue', '2012');}}}}, {field : 'listprice',title : 'List Price',width : 80,align : 'right',editor : {type : 'numberbox',options : {precision : 1}}}, {field : 'unitcost',title : 'Unit Cost',width : 80,align : 'right',editor : 'numberbox'}, {field : 'attr1',title : 'Attribute',width : 250,editor : 'text'}, {field : 'status',title : 'Status',width : 60,align : 'center',editor : {type : 'checkbox',options : {on : 'P',off : ''}}}]],onBeforeLoad : function () {$(this).datagrid('rejectChanges');},onClickRow : function (rowIndex) {if (lastIndex != rowIndex) {$dg.datagrid('endEdit', lastIndex);$dg.datagrid('beginEdit', rowIndex);}lastIndex = rowIndex;}});});var products = [{productid : 'FI-SW-01',name : 'Koi'}, {productid : 'K9-DL-01',name : 'Dalmation'}, {productid : 'RP-SN-01',name : 'Rattlesnake'}, {productid : 'RP-LI-02',name : 'Iguana'}, {productid : 'FL-DSH-01',name : 'Manx'}, {productid : 'FL-DLH-02',name : 'Persian'}, {productid : 'AV-CB-01',name : 'Amazon Parrot'}];function productFormatter(value) {for (var i = 0; i < products.length; i++) {if (products[i].productid == value)return products[i].name;}return value;}

EasyUI DataGrid 可编辑列级联操作相关推荐

easyui datagrid th标签列数字保留2位小数
easyui datagrid th标签列数字保留2位小数在th标签内添加data-options="formatter:formatState",然后在脚本里编写formatS ...
关于EasyUI DataGrid行编辑时嵌入时间控件
本人做一个名为"安徽中控"项目时,为快速开发基础数据增删改模块,遂采用EasyUIDatagrid将所有增删改查的操作都集中于表格中,并且所有增删改查操作都集中于泛型对象,从而不必 ...
EasyUI Datagrid跨行跨列的需求
常规开发后台管理系统中遇到的列表查询,都是用到最基本的数据网格,不包括单元格合并,多列页眉,冻结列和页脚等需求.类似如下这个列表实现也很简单,引入相关的js.css文件,html标签定义展示的列,通 ...
[转]easyui datagrid 批量编辑和提交
web前台主要代码: <script type="text/javascript">$(function() {var $dg = $("#dg") ...
easyui datagrid 表格组件列属性formatter和styler使用方法
明确单元格DOM结构要想弄清楚formatter和styler属性是怎么工作的,首先要弄清楚datagrid组件内容单元格的DOM接口,注意,这里指的是内容单元格,不包括标题单元格,标题单元格 ...
Easyui Datagrid相同连续列合Demo之三
效果图: html <!DOCTYPE html> <html> <head><meta charset="UTF-8"><t ...
EasyUI DataGrid 隐藏其中一列
语法:$("#grid").datagrid("hideColumn","列field"); table举例如下: <table id ...
jQuery EasyUI DataGrid - 格式化列（formatter ）
以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色. 为了格式化一个数据网格(DataGrid)列,我们需要设置 ...
easyui datagrid编辑时修改其它列的数值.
easyui datagrid编辑时修改其它列的数值. { field: 'converter', title: '转化器', align: 'left', width: 250,editor: {t ...

EasyUI DataGrid 可编辑列级联操作

EasyUI DataGrid 可编辑列级联操作相关推荐

最新文章

热门文章