Jquery easyui 相关FAQ

1、下拉列表复选框 combobox：

      

<select  id="hidden_shopCategory"  style="width:290px" class="easyui-combobox" data-options="multiple:true,valueField:'id',textField:'name',url:'xxx/getShopCategoryList.do'">
</select>

var shopCategory = jQuery("#hidden_shopCategory").combobox("getValues");
jQuery("#shopCategory").val(shopCategory);

   如上为多选下拉列表，数据从后台http返回的Json中解析； 通过 valueField 和 textField 配置 value 和 text ； 一般选择后提交到后台只是一个值，可以在提交前通过 getValues 获取选择的项放入隐藏文本域中提交到后台处理。

2、下拉列表树 combotree 异步节点加载：

后台Java处理代码：

map.put("id", oneChild.getCategoryId());
map.put("text", oneChild.getName());
if (oneChild.getChildrenCount() >0 ) {
	map.put("state", "closed");
}

前台处理代码：

<select  id="hidden_itemCategory" style="width:290px" class="easyui-combotree" data-options="multiple:true,valueField:'id',textField:'value',url:'xxx'">
</select>

后台处理代码中返回到前端的Json字符串中，包含 id,text,state .. 当state 为closed状态时，用户点击展开系统就会异步的去后台加载传递过去参数为 id 。

3、DataGrid相关操作：

获取当前选中的行：var row = $('#gridApplication').datagrid('getSelected');  
获取多行选择，返回选择行的数组：var applicationArray = jQuery('#gridApplication').datagrid("getSelections");
设置表格的属性Options选项：jQuery('#gridApplication').datagrid("options").singleSelect = false;

4、右键菜单、表格上的右键菜单：

<div id="menuName" class="easyui-menu" style="width:80px;">
    <div id="userNew" onClick="newUser()" data-options="iconCls:'icon-search'">新建用户</div>
    <div id="userDel" onClick="delUser()" data-options="iconCls:'icon-edit'">删除用户</div>
</div>

 function onRowContextMenu(e, index, row){
            e.preventDefault();
	    jQuery('#gridApplication').datagrid("options").singleSelect = true;
            jQuery('#gridApplication').datagrid('selectRow',index); //选择焦点所在的行
	    jQuery("#menuName").menu('show', {
                left:e.pageX,
                top:e.pageY
            });    	
  }

可以通过DataGrid属性 onRowContextMenu 为每一行设置右键菜单； onHenderContextMenu 是表格列头的右键菜单。 

右键菜单和表格行多选择时会发生选择冲突，可以在右键事件中设置为行单选 ； 在选择时候表格的 OnSelect 事件中，设置表格为行多选就可以避免冲突。