The 'formatter' function only returns the formatted string. This function can't create any components automatically. You have to construct them manually. Please try to call .linkbutton(...) when loaded data successfully.

Code:

$('#dg').datagrid({
  onLoadSuccess:function(){
    $(this).datagrid('getPanel').find('a.easyui-linkbutton').linkbutton();
  }
});

The local searching is similar to this tutorial. All you need to do is to filter the 'data' and call 'loadData' method to render the new rows. Please see the 'doSearch' function to learn how to achieve this functionality.

Code:

function doSearch(q){
    var rows = [];
    $.map(data, function(row){
        for(var p in row){
            var v = row[p];
            if (String(v).indexOf(q) >= 0){
                rows.push(row);
                break;
            }
        }
    });
    $('#dg').datagrid('loadData', rows);
}

Here is the tutorial shows how to add search functionality.
http://www.jeasyui.com/tutorial/datagrid/datagrid24.php

The appendRow method append a new row to the current page. To append to other page, you have to change the grid page before calling this method.

You have to use draggable and droppable plugins to achieve this functionality manually.

To update and apply column properties, you have to recreate datagrid with the new columns.

Code:

var dg = $('#dg');
var columns = dg.datagrid('options').columns;
columns[0][2].title = 'new title';  //change columns ...
dg.datagrid({columns:columns});  // recreate datagrid

Please confirm if you are using the latest edatagrid plugin. If not, please download it from http://www.jeasyui.com/extension/edatagrid.php.

Please download the latest 'datagrid-filter.js' file from http://www.jeasyui.com/extension/datagrid_filter.php. You may need to override the filter operators. The operator code looks like this:

Code:

$.extend($.fn.datagrid.defaults.operators,{
	less: {
		text: 'Less',
		isMatch: function(source, value){
			return source < value;
		}
	}
})

All the $.messager functions work in async mode. This means that the user can't block it before doing any more. To make the confirm message window works like a native confirm window in 'onBeforeClose' event, please try the code below:

Code:

$('#win').window({
  onBeforeClose:function(){
    var p = $(this);
    $.messager.confirm('Confirm','Are you sure you want to close?',function(r){
      if (r){
        var opts = p.panel('options');
        var onBeforeClose = opts.onBeforeClose;
        opts.onBeforeClose = function(){};
        p.panel('close');
        opts.onBeforeClose = onBeforeClose;
      }
    });
    return false;
  }
})

If a data item has 'selected' property set to true, it will be selected when loaded successfully. All you need to do is to set 'selected' property for the specified item from your returned json data. Look at the following data, the 'Ruby' item will be selected since its 'selected' property is set to true.

Code:

[{
	"value":1,
	"text":"Java"
},{
	"value":2,
	"text":"C#"
},{
	"value":3,
	"text":"Ruby",
	"selected":true
}]

Please try to download the latest 'datagrid-filter.js' file from http://www.jeasyui.com/extension/datagrid_filter.php

The 'checkRow' method must be called after loaded data successfully, so please do the checking rows in the 'onLoadSuccess' event.

Code:

<table id="package_group_table" class="easyui-datagrid" style="width:250px;height:150px"
    data-options="url:admin/packagegroup/list_package_group_for_checkbox',singleSelect:false,
    onLoadSuccess:function(){
		var rows = $(this).datagrid('getRows');
		for(var i=0; i<rows.length; i++){
			if (rows[i]['CHECKED']){
				$(this).datagrid('checkRow',i);
			}
		}    
    }
    ">
    <thead>
        <tr>
            <th data-options="field:'PACKAGE_GROUP_ID'">ID</th>
            <th data-options="field:'PACKAGE_GROUP_ALIAS'">Name</th>
            <th data-options="field:'CHECKED'">Status</th>
            <th data-options="field:'CHECKED_STATUS',checkbox:true">Ck</th>
        </tr>
    </thead>
</table>

A possible solution to solve this issue is to add a validate type to this combobox. When inputed value is invalid, the prompt message will display.

Code:

$.extend($.fn.validatebox.defaults.rules,{
       inList:{
              validator:function(value,param){
                     var c = $(param[0]);
                     var opts = c.combobox('options');
                     var data = c.combobox('getData');
                     var exists = false;
                     for(var i=0; i<data.length; i++){
                            if (value == data[i][opts.textField]){
                                   exists = true;
                                   break;
                            }
                     }
                     return exists;
              },
              message:'invalid value.'
       }
})

Apply this 'inList' validation type to a combobox component.

Code:

$('#cc').combobox({
       validType:'inList["#cc"]'
});

The rows must be an array, so the returned data should be as.

Code:

{"total":1,"rows":[{...}]}

Our developer team has solved this menu issue. Now the menu can adjust its height automatically when displaying on top or on bottom of the button. The patch file can be downloaded from http://www.jeasyui.com/download/downloads/jquery-easyui-1.3.6-patch.zip.