jQuery EasyUI - 添加指向单元格的链接

时间:2013-04-17 13:49:23

标签: jquery

我有2个表:客户联系人。表联系人有一个指向客户表的外键。

<table id="dgContactSearch" title="Suche" class="easyui-datagrid" style="height:160px" 
                            url="getContacts.php"
                            toolbar="#toolbarContactSearch" pagination="true"
                            rownumbers="true" fitColumns="true" singleSelect="true">
                        <thead>
                            <tr>
                                <th field="customer_id" width="50">Customer</th>
                                <th field="name" width="50">Name</th>
                                <th field="function" width="50">Funktion</th>
                                <th field="phone" width="50">Phone</th>
                                <th field="mobile" width="50">Mobile</th>
                                <th field="fax" width="50">Fax</th>
                                <th field="email" width="50">Email</th>
                                <th field="comment" width="50">Commnent</th>
                            </tr>
                        </thead>
                    </table>

这是php文件

$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
    $searchItemContact = isset($_POST['searchItemContact']) ? mysql_real_escape_string($_POST['searchItemContact']) : '';

    $searchItemContact = htmlentities($searchItemContact, ENT_QUOTES, 'UTF-8');

    $offset = ($page-1)*$rows;

    $result = array();

    $where = "name like '%$searchItemContact%' OR function like '%$searchItemContact%' OR email like '%$searchItemContact%' OR comment like '%$searchItemContact%'";
    $rs = mysql_query("select count(*) from contact where " . $where);
    $row = mysql_fetch_row($rs);
    $result["total"] = $row[0];

    $rs = mysql_query("select * from contact where " . $where . " limit $offset,$rows");

    $items = array();
    while($row = mysql_fetch_object($rs)){
        array_push($items, $row);
    }
    $result["rows"] = $items;
    echo json_encode($result);

我想让<th field="customer_id" width="50">Customer</th>可链接。即<a href="customerView.php?id=$customer_id>#</a> 因此,当我加载表格时,我会看到客户名称已设置为id,并链接到客户页面! 请帮忙。

更新

我以某种方式管理了一些解决方法:

<th data-options="field:'name',width:100,align:'left',formatter:formatCustomerId">Name</th>

然后是Javascript函数:

function formatCustomerId(val,row){
    var url = "customerView.php?id=";
    return '<a href="'+url + row.customer_id+'">'+val+'</a>';
}

2 个答案:

答案 0 :(得分:3)

最终解决方案是以前所有答案的混合:)。

<table id="dgContactSearch" title="Benutzer Suche" class="easyui-datagrid" style="height:160px" 
                            url="getContacts.php"
                            toolbar="#toolbarContactSearch" pagination="true"
                            rownumbers="true" fitColumns="true" singleSelect="true">
                        <thead>
                            <tr>
                                <th data-options="field:'firma',width:80,align:'left',formatter:formatCustomerId">Kunde</th>
                                <th data-options="field:'name',width:50,align:'left',formatter:formatContactUrl">Name</th>
                                <th field="function" width="50">Funktion</th>
                                <th field="phone" width="50">Phone</th>
                                <th field="email" width="50">Email</th>
                                <th field="mobile" width="50">Mobile</th>
                                <th field="fax" width="50">Fax</th>

                                <th field="comment" width="120">Kommentare</th>
                            </tr>
                        </thead>
</table>

剧本:

<script>
function formatCustomerId(val,row){
    var url = "customerView.php?id=";
    return '<a href="'+url + row.customer_id+'">'+val+'</a>';
}

function formatContactUrl(val,row){
    var url = "contactView.php?id=";
    return '<a href="'+url + row.id+'">'+val+'</a>';
}
</script>

和getContacts.php

<?php
    include 'includes/db_functions.php';
    db_link();

    $page = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
    $searchItemContact = isset($_POST['searchItemContact']) ? mysql_real_escape_string($_POST['searchItemContact']) : '';

    $searchItemContact = htmlentities($searchItemContact, ENT_QUOTES, 'UTF-8');

    $offset = ($page-1)*$rows;

    $result = array();

    $where = "name like '%$searchItemContact%' OR function like '%$searchItemContact%' OR customer.name like '%$searchItemContact%' OR email like '%$searchItemContact%' OR comment like '%$searchItemContact%'";
    $rs = mysql_query("select count(*) from contact where " . $where);
    $row = mysql_fetch_row($rs);
    $result["total"] = $row[0];


    $sql = "SELECT contact.*, customer.name
    FROM `contact`
    INNER JOIN `kunden` on contact.customer_id = kunden.id ";

    $rs = mysql_query($sql . "where " . $where . " limit $offset,$rows");

    $items = array();
    while($row = mysql_fetch_object($rs)){
        array_push($items, $row);
    }
    $result["rows"] = $items;
    echo json_encode($result);

?>

答案 1 :(得分:0)

对于那种链接,我使用data-url属性来保存我想要重定向的URL,然后使用jquery重定向用户,例如:

在生成表格的服务器端,写下要将链接关联到的data-url属性:

<td class='customer_whatever' data-url='<?= $customer_page_url ?>'> Customer Name</td>

在jQuery中捕获所有并添加onclick事件:

$('td').each(function(){
  if($(this).data('url')){
      $(this).click(function(){

        $(location).attr('href',$(this).data('url'));
      });
  }
});

在css中不要忘记:

.customer_whatever{ cursor:pointer;}

这是一个很小的工作示例:http://jsfiddle.net/9XA3k/1/