easyui datagrid editors扩展之combogrid

01 $.extend($.fn.datagrid.defaults.editors, {
02 combogrid: {
03 init:function(container, options){
04 varinput = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
05 input.combogrid(options);
06 returninput;
07 },
08 destroy:function(target){
09 $(target).combogrid('destroy');
10 },
11 getValue:function(target){
12 return$(target).combogrid('getValue');
13 },
14 setValue:function(target, value){
15 $(target).combogrid('setValue', value);
16 },
17 resize:function(target, width){
18 $(target).combogrid('resize',width);
19 }
20 }
21 });

用法：

01	$('#dg').datagrid({

02	columns:[[

03	{field:'productid',name:'ProductId',width:100,

04

editor:{

05	type:'combogrid',

06

options:{

07	panelWidth:450,

08	idField:'code',

09	textField:'name',

10	url:'datagrid_data.json',

11	columns:[[

12	{field:'code',title:'Code',width:60},

13	{field:'name',title:'Name',width:100},

14	{field:'addr',title:'Address',width:120},

15	{field:'col4',title:'Col41',width:100}

16

]]

17

}

18

}

19

}

20

]]

21

});

varinsertRows=$('#test').datagrid('getChanges','inserted');
varupdateRows=$('#test').datagrid('getChanges','updated');
vardeleteRows=$('#test').datagrid('getChanges','deleted');
varchangesRows={
inserted:[],
updated:[],
deleted:[],
};
if(insertRows.length>0){
for(vari=0;i<insertRows.length;i++){
changesRows.inserted.push(insertRows[i]);
}
}

if(updateRows.length>0){
for(vark=0;k<updateRows.length;k++){
changesRows.updated.push(updateRows[k]);
}
}

if(deleteRows.length>0){
for(varj=0;j<deleteRows.length;j++){
changesRows.deleted.push(deleteRows[j]);
}
}

$.ajax({
type:"post",
url:"../stock/stock_modify.asp",
data:"inserted="+JSON.stringify(changesRows.inserted)+"&updated="+JSON.stringify(changesRows.updated)+"&deleted="+JSON.stringify(changesRows.deleted),
datatype:"json",
success:function(data){

}


})

以上是针对插入删除更新操作

jquery easyUI combobox赋值

2011-03-18 08:45

Js代码

1. <inputclass="easyui-combobox"
2. id="cc"
3. name="mallId"
4. url="${ctx}/record/mallin!getMall.action"
5. valueField="id"
6. textField="name"
7. multiple="true"
8. panelHeight="auto"
9. /></td>

name：用来和后台绑定，

url：异步json从后台的方法中获得json数据，

valueField：选取文字后对应的值

textField：显示的文字

multiple="true"：允许在下拉列表里多选

多选提交到后台会变成一个名字为mallId的Long型数组，

后台返回到前台时，给combobox赋值，代码如下：

导入c标签：<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

Js代码

1. vari=0;
2. vart=[];
3. <c:forEachitems="${mallId}"var="u">
4. t[i]=${u};
5. i++;
6. </c:forEach>
7. $('#cc').combobox('setValues',t);

这是给combobox赋很多值，

赋单个值是用：$('#cc').combobox('setValue',‘1’);