Datagrid的行内编辑,Combobox的级联。

选择一个省份,市区的信息会发生相应的变化。主要是第一个combobox的值发生变化的时候,访问服务器,获得数据并赋值给第二个combobox,获取数据就是一个ajax时间,在第一个combobox中获得第二个combobox对象:

.$.get(ctx+‘region/ajaxRegionList.html‘,{parentid:newValue},function(data){
var ed=$("#"+frm+"#addresstest").datagrid(‘getEditor‘,{
index:$rowIndexForAddress,//当前正在编辑的行的index
field:‘country‘,//第二个combobox的列名
});
$(ed.target).combobox(‘clear‘);
$(ed.target).combobox(‘loadData‘,data);
},‘json‘);

$rowIndexForAddress可以在onbeforeedit中获得, 在onafteredit中清空。
2. $.get(ctx+‘region/ajaxRegionList.html‘,{parentid:newValue},function(data){
var row = $("#"+frm+" #addresstest").datagrid(‘getSelected‘);
var rindex = $("#"+frm+" #addresstest").datagrid(‘getRowIndex‘, row);
var ed = $("#"+frm+" #addresstest").datagrid(‘getEditor‘, {
index : rindex,
field : ‘country‘,
});
$(ed.target).combobox(‘clear‘);
$(ed.target).combobox(‘loadData‘, data);
},‘json‘);
推荐第一种方法。第二种方法有bug,问题存在这一句上:var row = $("#"+frm+" #addresstest").datagrid(‘getSelected‘); datagrid中有两条数据,你修改了第一条,第一条处于编辑状态, 你再点击第二条。然后再回到第一条。这个时候 row是第二条, index是1(本应该是0);

{field:‘province‘,title:‘省份‘,align:‘center‘,width:100,
editor:{
type:‘combobox‘,
options:{
valueField:‘code‘,
textField:‘name‘,
editable:false,
panelHeight:‘100‘,
required:true,
queryParams:{parentid:‘0‘},
url:ctx+‘region/ajaxRegionList.html‘,
onChange:function(newValue,oldValue){
$.get(ctx+‘region/ajaxRegionList.html‘,{parentid:newValue},function(data){
var ed=$("#"+frm+"#addresstest").datagrid(‘getEditor‘,{
index:$rowIndexForAddress,
field:‘country‘,
});
$(ed.target).combobox(‘clear‘);
$(ed.target).combobox(‘loadData‘,data);
},‘json‘);
},
onLoadSuccess:function(){
var target=$(this);
var data=target.combobox("getData");
var options=target.combobox("options");
if(data&&data.length>0){
var fs=data[0];
target.combobox("setValue",fs[options.valueField]);
}
},
formatter:function(row){
var opts=$(this).combobox(‘options‘);
return row[opts.textField];
},
onSelect:function(record){
$protext=record.name;
},
}},
},
{field:‘country‘,title:‘市区‘,align:‘center‘,width:100,
editor:{
type:‘combobox‘,
options:{
valueField:‘code‘,
textField:‘name‘,
editable:false,
panelHeight:‘100‘,
required:true,
onChange:function(newValue,oldValue){
$.get(ctx+‘region/ajaxRegionList.html‘,{parentid:newValue},function(data){
var ed=$("#"+frm+"#addresstest").datagrid(‘getEditor‘,{
index:$rowIndexForAddress,
field:‘street‘,
});
$(ed.target).combobox(‘clear‘);
$(ed.target).combobox(‘loadData‘,data);
},‘json‘);
},
onLoadSuccess:function(){
var target=$(this);
var data=target.combobox("getData");
var options=target.combobox("options");
if(data&&data.length>0){
var fs=data[0];
target.combobox("setValue",fs[options.valueField]);
}
},
formatter:function(row){
var opts=$(this).combobox(‘options‘);
return row[opts.textField];
},
onSelect:function(record){
$citytext=record.name;
},
}},
},
{field:‘street‘,title:‘街道‘,align:‘center‘,width:100,
editor:{
type:‘combobox‘,
options:{
valueField:‘code‘,
textField:‘name‘,
editable:false,
panelHeight:‘100‘,
required:true,
onLoadSuccess:function(){
var target=$(this);
var data=target.combobox("getData");
var options=target.combobox("options");
if(data&&data.length>0){
var fs=data[0];
target.combobox("setValue",fs[options.valueField]);
}
},
formatter:function(row){
var opts=$(this).combobox(‘options‘);
return row[opts.textField];
},
onSelect:function(record){
$streettext=record.name;
$countyId=record.code;
}
}}
},
{field:‘addressInfo‘,title:‘详细地址‘,align:‘center‘,width:250,
editor:{
type:‘validatebox‘,
options:{
validtype:‘lenx[50]‘,
required:true,
}
},
},

时间: 2024-10-22 23:08:35

Datagrid的行内编辑,Combobox的级联。的相关文章

EasyUI之dataGrid的行内编辑

1 $(function () { 2 var datagrid; //定义全局变量datagrid 3 var editRow = undefined; //定义全局变量:当前编辑的行 4 datagrid = TskupluAddPacket.datagrid({ 5 url: ThinkPHP['MODULE'] + '/Tskuplu/getPacketList', //请求的数据源 6 iconCls: 'icon-save', //图标 7 pagination: true, //显

关于ligerui grid 行内编辑 combobox 只能选择的问题

这个貌似是天然的不支持,修复方案,在ligerGridOrd.js中添加一行代码,如下,跟了一下午的源码,发现在这里的时候,options中只保留了combobox中的一部分属性,所以可能combobox中的很多东西都用不了了.这段代码大约在271行的位置,如果你没有引用ligerGridOrd.js,那就去ligerui.all.js找找看,应该也会有. $.ligerDefaults.Grid.editors['select'] = $.ligerDefaults.Grid.editors[

EasyUI-Datagrid行内编辑

接上一篇,这次介绍easyUI的datagrid的行内编辑单元格的功能. 关于行内编辑,我之前写过一个demo <jQuery:页面可编辑表格>,但是easyui 中早已经封装了行内单元格编辑的功能,我们在调用时只需要使用人家封装好的方法就行.这里就使用封装好的方法. 实现思路: 1.定义table 时写上监听单击事件的方法:onClickCell:onClickCell: 2.将需要编辑的<th>和<td>设置编辑的触发响应:editor:'text'.其中text只

Easy UI实现行内编辑

最近跟着勇霞师姐做我们高校云平台的UI系统,各个系统界面的管理.UI的系统虽然很小,但是技术内容很新鲜,这篇博文就像大家介绍一下我新接触的EasyUI的知识:开启行内编辑. 效果图如下: 一.View页面 首先,引入easyui的js文件. [html] view plaincopy <link rel="stylesheet" type="text/css" href="../../Content/jquery-easyui-1.3.2/theme

ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑

前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 #是否,已经可以看到效果了. 对于分类ID列,通常显示的是分类名称,而不是ID值. 可是分类名称不在文章表里,在文章分类表,怎么关联格式化呢? 我们有文章分类表: 所以我们写个下拉配置: 然后在配置表头里把它配置上: 效果: PS:通过自定义语句来翻译下拉项的注意事项: 1:翻译项的数量在100以下,

JS组件系列——BootstrapTable 行内编辑解决方案:x-editable

前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件,遇到过一些坑,再此做个采坑记录吧!想要了解bootstrapTable的园友可以移步 JS组件系列——表格组件神器:bootstrap table. 本文原创地址:http://www.cnblogs.com/landeanfen/p/5821192.html 一.x-editable组件介绍 x

[转]Laravel与bootstrap-editable实现table的行内编辑

[转]Laravel与bootstrap-editable实现table的行内编辑 准备需要的库 bootstrap3.0下载 bootstrap-table下载 x-editable-develop下载 前端处理 引入库 要使用插件,首先要在blade模板(或者说html)里引入对应的js文件和css文件 bootstrap引入 <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>

vxe-table 可编辑表格 行内编辑以及验证 element-UI集成

<vxe-table border show-overflow ref="xTable"  --------------------------------------------------------------------------------------------可根据此变量控制表格内容 class="vxe-table-element" height="600" :data="tableData"-----

bootstrap-table 行内编辑

所需的样式和js文件: https://pan.baidu.com/s/1eSAKzyM 密码: s3wh 参考 : http://www.cnblogs.com/landeanfen/p/5005367.html columnsDefined()  处需要加行内编辑的可这么设置 { title : '备注', field : 'remark', formatter : function(value, row, index){ if(value == null){ return "添加"