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’);


你可能感兴趣的:(datagrid)