手把手教你如何在jquery easy ui 中添加搜索、导出excel、增删改等操作按钮

    先上个效果图：

重要代码如下：

        <div id="apply">
            <table id="applytable" data-applyid="<?php  p($_['applyid']); ?>">

            </table>
        </div>
        <div id="toolbar">
            <?php p($l->t('Username'));?>:<input id="s_name" type="text" />
            <?php p($l->t('Telephone'));?>:<input id="s_telephone" type="text" />
            <button id="searchAddressBookBtn" class="searchbtn"><?php p($l->t('Search')); ?></button>
            <button id="searchClear" class="searchclear"
                    title="<?php p($l->t('Clear search criteria')); ?>"><?php p($l->t('Clear search')); ?></button>
            <button id="export" class="exportbtn"
                    title="<?php p($l->t('When no search,get all,when in search, get search data')); ?>"><?php p($l->t('Export')); ?></button>
        </div>

html页面：只需要在table下面添加相应的按钮，放在toolbar div中

jquery页面代码如下：

$('#applytable').datagrid({
            rownumbers:true,//显示行数
            width: ($(window).width()*0.8),
            height:($(window).height()*0.7),
            url:OC.filePath('address_book','ajax','address.php'),
            pagination: true,
            showFooter: true,
            singleSelect: true,
            toolbar:'#toolbar',
            pageSize: 20,
            pageList: [5, 10, 20, 30, 50, 100, 150],
            loadMsg: t('address_book',"data loading,please wait a moment"),
            queryParams: {
                action:'getAllbankCorres'
            },
            onLoadSuccess: function(){
                //加载完数据关闭等待的div
                $("#applytable").datagrid('loaded');
                var applyData = $("#applytable").datagrid('getData');
                $.each(applyData.rows,function(key,value){
                    if(value['selected']) $('#applytable').datagrid('selectRow',key);
                })
            },
            columns:[[
                {field:'uid',title:t('address_book','name'),width:200,align:'center'},
                {field:'contact',title:t('address_book','phone'),width:150,align:'center',formatter: function(value, row, index){ return (value=='' || value== null) ?'暂未添加': value; } },
                {field:'address',title:t('address_book','address'),width:150,align:'center',formatter: function(value, row, index){ return (value=='' || value== null) ?'暂未添加': value; } },
                {field:'email',title:t('address_book','email'),width:150,align:'center',formatter: function(value, row, index){return (value=='' || value== null) ?'暂未添加': value; } },
                {field:'gname',title:t('address_book','depart'),width:150,align:'center',formatter: function(value, row, index){ return (value=='' || value== null) ?'暂未添加': value; } },
                // {field:'add',title:t('address_book','add friends'),width:80,align:'center',formatter: function(value, row, index){
                //         return '<img class="add action" src="'+ OC.imagePath('address_book', 'add.png')  + '" title="'+t('address_book','add')+'"/>';
                //     }},
                {field:'modify',title:t('address_book','modify'),width:80,align:'center',formatter: function(value, row, index){
                        return '<img class="modify action" src="'+ OC.imagePath('address_book', 'modify.png')  + '" title="'+t('address_book','modify')+'"/>';
                    }},
            ]]

        });
        //分页
        $("#applytable").datagrid("getPager").pagination({
            beforePageText: t('address_book','No.'),//页数文本框前显示的汉字
            afterPageText: t('address_book','page total {pages} page'),
            displayMsg: t('address_book','current display {from} - {to} record total {total} record'),
            onSelectPage:function (pageNo, pageSize) {
                $.post(
                    OC.filePath('address_book','ajax','address.php'),
                    {page:pageNo, rows:pageSize,action:'getAllbankCorres' },
                    function (result) {
                        alert(result);
                        var loaddata = JSON.parse(result);
                        $("#applytable").datagrid("loadData", loaddata);
                        $("#applytable").datagrid("getPager").pagination('refresh', {
                            total: loaddata.total,
                            pageNumber : pageNo,
                            pageSize : pageSize
                        });
                    });
            },
        });

重点是添加如下一行代码：toolbar:'#toolbar'来绑定其位置，不然位置显示不合理

要想按钮显示比较漂亮可以在其上添加背景图片，css代码如下:

.searchbtn{
    background: url('../img/search.png') no-repeat 5px;
    width: 80px;
}
.searchclear{
    background: url('../img/clear.png') no-repeat 5px;
    width: 80px;
}
.exportbtn{
    background: url('../img/export.png') no-repeat 5px;
    width: 80px;
}

最后，后台部分的处理，返回的数据应该是json形式，datagrid才可以使用。

这里只说下搜索的后台逻辑及代码实现：

1.搜索前台jquery + ajax代码:

//搜索
    $('#searchAddressBookBtn').on('click',function (event) {
        var username = $('#s_name').val();
        var telephone = $('#s_telephone').val();

        if(username == "" && telephone == "") {
            OC.dialogs.alert(t('settings', "Search item cannot be null!"), t('core', 'Error'));
            return;
        }
        var options = $("#applytable" ).datagrid("getPager" ).data("pagination" ).options;
        var pageNo = options.pageNumber;
        var pageSize = options.pageSize;

        OC.Notification.show(t('settings', 'In search state!'));
        setTimeout(OC.Notification.hide, 10000);
        $.post(
            OC.filePath('address_book', 'ajax', 'loadAddressBookData.php'),
            {
                action: 'searchAddressBook',
                pageNo:pageNo,
                pageSize:pageSize,
                username: username,
                telephone: telephone
            },
            function (result) {
                if (result)
                {
                    //将搜索结果显示在当前页面
                    var loaddata = JSON.parse(result);
                    $("#applytable").datagrid("loadData", loaddata);
                    $("#applytable").datagrid("getPager").pagination('refresh', {
                        total: loaddata.total,
                        pageNumber : pageNo,
                        pageSize : pageSize
                    });


                }else{
                    $("#applytable").datagrid("loadData", { total: 0, rows: [] });
                    OC.dialogs.alert(t('address_book', result.message), t('core', 'Warning'));
                }
            }
        );
    });

2.后台loadAddressBookData.php代码如下：

$action = isset( $_POST['action'] ) ? $_POST['action'] : '';
$currentUser = \OC_User::getUser();
if($action == 'searchAddressBook'){
    $page = isset($_POST["pageNo"]) ? intval($_POST["pageNo"]) : 1;
    $pageSize = isset($_POST["pageSize"]) ? intval($_POST["pageSize"]) : 20;
    $username = isset($_POST["username"]) ? $_POST["username"] : '';
    $telephone = isset($_POST["telephone"]) ? $_POST["telephone"] : '';

    $result= OCA\address_book\Address::getFullBankAddress($username, $telephone, $page, $pageSize);
    $count=OCA\address_book\Address::getSearchCount($username, $telephone);
    $json_string = json_encode(array('total'=>$count,'rows'=>$result));

echo $json_string; //json字符串，待前台转换为json格式

}

最后，我想说下，对于多条件的搜索，后台简单的实现逻辑：

/**
     *获取搜索后全行的通讯录
     * @param $username 姓名
     * @param $telephone 联系方式
     * @param $page 当前页
     * @param $limit 每页显示多少条数
     * @return array
     */
    public static function getFullBankAddress($username, $telephone, $page = 1, $limit = 0)
    {
        $offset = ($page - 1) * $limit;

        $searchstr = "SELECT `uid`,`contact`,`address` FROM *PREFIX*users WHERE ";
        $wherearray = array("1=1");
        $paraarray = array();

        if($username !== "") {//for username
            $wherearray[] = "`uid` LIKE ?";
            $paraarray[] = "%" . $username . "%";
        }
        if($telephone !== "") {//for telephone
            $wherearray[] = "`contact` LIKE ?";
            $paraarray[] = "%" . $telephone . "%";
        }

        $wherestr = implode(' AND ', $wherearray);
        $searchstr = $searchstr.$wherestr ;


        $query = \OC_DB::prepare($searchstr , $limit, $offset);
        $result = $query->execute($paraarray)->fetchAll();
        $arrdata = array();
        $arrdatas = array();
        foreach ($result as $key => $value) {
            $uid = $value['uid'];
            $query1 = \OC_DB::prepare("SELECT `configvalue` FROM *PREFIX*preferences WHERE configkey ='email' AND userid=? ");
            $result1 = $query1->execute(array($uid))->fetchRow();
            $email = $result1['configvalue'];
            $query2 = \OC_DB::prepare("SELECT `uid`,`gname` FROM *PREFIX*group_user as u LEFT JOIN *PREFIX*groups as g ON u.gid = g.gid WHERE uid =?");
            $result2 = $query2->execute(array($uid))->fetchRow();
            $gname = $result2['gname'];

            $arrdata['uid'] = $uid;
            $arrdata['contact'] = $value['contact'];
            $arrdata['address'] = $value['address'];
            $arrdata['email'] = $email;
            $arrdata['gname'] = $gname;
            $arrdatas[] = $arrdata;
        }
        if ($arrdatas) {
            return $arrdatas;
        } else {
            return array();
        }

    }

简单的说就是判断各个搜索项是否存在，如果存在，才进行搜索，才将sql进行拼接，最后，再将参数进行拼接传过去就ok啦！