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

var insertRows = $('#test').datagrid('getChanges','inserted');
     var updateRows = $('#test').datagrid('getChanges','updated');
     var deleteRows = $('#test').datagrid('getChanges','deleted');
     var changesRows = {
          inserted : [],
          updated : [],
          deleted : [],
          };
    if (insertRows.length>0) {
    for (var i=0;i<insertRows.length;i++) {
    changesRows.inserted.push(insertRows[i]);
    }
    }

    if (updateRows.length>0) {
    for (var k=0;k<updateRows.length;k++) {
    changesRows.updated.push(updateRows[k]);
    }
    }
   
    if (deleteRows.length>0) {
    for (var j=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.  <input class="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. var i = 0;  
2. var t = [];  
3. <c:forEach items="${mallId}" var="u">  
4.   t[i] = ${u};  
5.   i++;   
6.  </c:forEach>  
7. $('#cc').combobox('setValues',t);  

 这是给combobox赋很多值，

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