datagrid在MVC中的运用04-同时添加搜索和操作区域

本文介绍在datagrid上同时添加搜索和操作区域。

仅仅是增加操作区域

□ 方法1

$('#dg').datagrid({ 

    toolbar: '#tb' 

}); 

<div id="tb"> 

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a> 

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a> 

</div>

□ 方法2

$('#dg').datagrid({ 

    toolbar: [{ 

        iconCls: 'icon-edit', 

        handler: function(){alert('edit')} 

    },'-',{ 

        iconCls: 'icon-help', 

        handler: function(){alert('help')} 

    }] 

});

仅仅增加搜索区域

$('#dg').datagrid({ 

    toolbar: '#tb' 

});

    <!--搜索开始--> 

    <div id="tb" style="padding:3px"> 

        <span>主键:</span> 

        <input id="itemid" style="line-height:22px;border:1px solid #ccc"> 

        <span>产品编号:</span> 

        <input id="productid" style="line-height:22px;border:1px solid #ccc"> 

        <a href="#" class="easyui-linkbutton" plain="false" id="btnQuery">搜索</a> 

    </div> 

    <!--搜索结束-->

同时增加搜索和操作区域

$('#dg').datagrid({ 

    toolbar: '#tb,#tb1', 

});   

    <!--搜索开始--> 

    <div id="tb" style="padding:3px"> 

        <span>主键:</span> 

        <input id="itemid" style="line-height:22px;border:1px solid #ccc"> 

        <span>产品编号:</span> 

        <input id="productid" style="line-height:22px;border:1px solid #ccc"> 

        <a href="#" class="easyui-linkbutton" plain="false" id="btnQuery">搜索</a> 

    </div> 

    <!--搜索结束-->

    <!--操作按钮开始--> 

    <div id="tb1"> 

        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert('Add')">添加</a> 

        <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="javascript:alert('Cut')">剪切</a> 

        <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert('Save')">保存</a> 

    </div> 

    <!--操作按钮结束-->