jquery datatable插件

关于一些项目中使用管理面板,如果直接使用数据库表单插件,如传统的datatable控件,.net aspx的grid view,等等,便利性都是有目共睹. 现在想找在php或jquery的插件,以减少重复工作.

 

1.下载,解压代码

如图:

2.参照里面的示例.我的代码如下:

页面包含css:

<link href="/s/ful/css/m/member/demo_page.css" media="screen" rel="stylesheet" type="text/css" /> 
<link href="/s/ful/css/m/member/demo_table.css" media="screen" rel="stylesheet" type="text/css" /> 
<link href="/s/ful/css/third/jquery-ui/jquery-ui.css" media="screen" rel="stylesheet" type="text/css" /> 
<link href="/s/ful/css/m/member/themes/smoothness/jquery-ui-1.7.2.custom.css" media="screen" rel="stylesheet" type="text/css" /> 

包含JS:

<script type="text/javascript" src="/s/ful/js/third/jquery/jquery.min.js"></script> 
<script type="text/javascript" src="/s/ful/js/third/jquery.dataTables.1.8.2.js"></script> 
<script type="text/javascript" src="/s/ful/js/third/jquery.jeditable.js"></script> 
<script type="text/javascript" src="/s/ful/js/third/jquery-ui/jquery-ui.min.js"></script> 
<script type="text/javascript" src="/s/ful/js/third/jquery.validate.js"></script> 
<script type="text/javascript" src="/s/ful/js/third/jquery.dataTables.editable.js"></script> 

客户端代码:

<div id="dt_example">
    <div id="container">
        
        <form id="formAddNewRow" title="Add new record">
            <input type="hidden" name="id" id="id" value="DATAROWID" rel="0" />
                <label for="locale">locale</label><br />
            <input type="text" name="locale" id="locale" rel="1" />
                <br />
                <label for="country">country</label><br />
            <input type="text" name="country" id="country" rel="2" />
                <br />
                <label for="encoding">encoding</label><br />
            <textarea name="encoding" id="encoding" rel="3">utf-8</textarea>
                <br />
                <label for="defaultcatalogid">defaultcatalogid</label><br />
                <input type="text" name="defaultcatalogid" id="defaultcatalogid" rel="4" value="0" />
                <br />
                <label for="ucatid">ucatid</label><br />
                <input type="text" name="ucatid" id="ucatid" rel="5" value="0" />
                <br />
                <label for="rssstatus">ucatid</label><br />
                <input type="text" name="rssstatus" id="rssstatus" rel="6" value="0" />
                <br />
        </form>
            
        <div id="demo">
            
            
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>locale</th>
                        <th>country</th>
                        <th>encoding</th>
                        <th>defaultcatalogid</th>
                        <th>ucatid</th>
                        <th>rssstatus</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>id</th>
                        <th>locale</th>
                        <th>country</th>
                        <th>encoding</th>
                        <th>defaultcatalogid</th>
                        <th>ucatid</th>
                        <th>rssstatus</th>
                    </tr>
            
                </tfoot>
                <tbody>
            
                </tbody>
            </table>
        
            <div class="add_delete_toolbar" >
            </div>
        </div>
    </div>
</div>

客户端JS脚本:

$(document).ready( function () {
    
     $('#example').dataTable({
                                "bProcessing": true,
                                "sAjaxSource": pkrss_feedurl + "?task=locale&output=datatable"
                              }
                              ).makeEditable({
                    sUpdateURL: pkrss_feedurl + "?task=localeupdate",
            sAddURL: pkrss_feedurl + "?task=localeadd",
                    sAddHttpMethod: "GET",
            sDeleteURL: pkrss_feedurl + "?task=localedel",
                    sDeleteHttpMethod: "GET"
                        });
} );

服务端PHP:

/**
* 返回表单数据 */ 
public function localeAction(){
        $localeModel = new RssLocaleModel();
        $request = $this->getRequest();
         $result = $localeModel->getList(true)->toArray();
         $this->outputDataTable($result);}
    
    /** 添加
     * eg: task=localeadd&id=DATAROWID&locale=test&country=test&encoding=test&defaultcatalogid=test&ucatid=test
     */
    public function localeaddAction(){
        
        $request = $this->getRequest();
        $data = array('locale'=>$request->getParam('locale'),
                'country'=>$request->getParam('country'),
                'encoding'=>$request->getParam('encoding'),
                'defaultcatalogid'=>$request->getParam('defaultcatalogid'),
                'ucatid'=>$request->getParam('ucatid'),
                'rssstatus'=>$request->getParam('rssstatus'));
        
        $localeModel = new RssLocaleModel();
        $result = $localeModel->addLocale($data);
        
        $this->outputData($result);
    }
    
    /* 删除
     * task=localedel&id=46
     */
    public function localedelAction(){
         
        $request = $this->getRequest();
        $localeModel = new RssLocaleModel();
        $result = $localeModel->delLocale($request->getParam('id'));
        if($result)
            $this->outputData('ok');
        else
            $this->outputData('no');
    }
    
    /* 修改
     * value:test2 id:49 rowId:45 columnPosition:1 columnId:1 columnName:locale
     */
    public function localeupdateAction(){
         
        $request = $this->getRequest();
        $localeModel = new RssLocaleModel();
        $result = $localeModel->updateLocale($request->getParam('id'),$request->getParam('columnName'),$request->getParam('value'));
        if($result)
            $this->outputData('ok');
        else
            $this->outputData('no');
    }