jqWidgets의 jqxGrid : server side filtering


화면



컬럼 네임을 클릭하면 위와 같은 화면이 나와 데이터를 말그래도 필터하는 것을 filter라고한다.


filter 버튼을 클릭하면 조건이 서버로 전해지고 전달한 조건에 따라 쿼리해서 다시 자료가 오는 것이다. 이때 서버로 가는 여러 가지 값이 있다.


filterscount - the number of filters applied to the Grid

filtervalue - the filter's value. The filtervalue name for the first filter is "filtervalue0", for the second filter is "filtervalue1" and so on.

filtercondition - the filter's condition. The condition can be any of these: "CONTAINS", "DOES_NOT_CONTAIN", "EQUAL", "EQUAL_CASE_SENSITIVE", NOT_EQUAL","GREATER_THAN", "GREATER_THAN_OR_EQUAL", "LESS_THAN", "LESS_THAN_OR_EQUAL", "STARTS_WITH", "STARTS_WITH_CASE_SENSITIVE", "ENDS_WITH", "ENDS_WITH_CASE_SENSITIVE", "NULL", "NOT_NULL", "EMPTY", "NOT_EMPTY"

filterdatafield - the filter column's datafield

filteroperator - the filter's operator - 0 for "AND" and 1 for "OR"


여기서 정말 서버로 위와 같은 값이 잘 갈까 궁금해 졌다. 어떻게 확인하지. 정식으로 뭐 어떻게 하는 방법이있겠지만 ...

내가 호출하는 파일은 html파일이다. html 파일이 ajax로 php파일을 불러 오니 php에서 에러가 나는지 안 나는지 알 수도 없고 답답한 노릇이다. 간단한 해결 방법은 텍스트 파일에 써 보는 것이다.

다음과 같은 코드를 삽입한다.


if (isset($_GET['filterscount']))

{

    $filterscount = $_GET['filterscount'];


    $myfile = fopen("newfile.txt", "w") or die("Unable to open file!");

    fwrite($myfile, $filterscount);

    fclose($myfile);

}


필터가 있으면 필터의 개수를 서버의 텍스트 파일에 쓰는 것이다. 예를 들어 필터를 하나만 주니 1이 출력되고 두 개 필터를 주니 2가 출력되었다.



위와 같이 필터를 주고 아래와 같은 코드를 주면

if ($_GET['filterscount'] > 0 )

{

    $myfile = fopen("newfile.txt", "w") or die("Unable to open file!");


    $filterscount = $_GET['filterscount'] . "\n";

    fwrite($myfile, $filterscount);


    $filterdatafield0 = $_GET['filterdatafield0'] . "\n";

    fwrite($myfile, $filterdatafield0);


    $filtercondition0 = $_GET['filtercondition0'] . "\n";

    fwrite($myfile, $filtercondition0);


    $filtervalue0 = $_GET['filtervalue0'] . "\n";

    fwrite($myfile, $filtervalue0);


    $filteroperator0 = $_GET['filteroperator0'] . "\n";

    fwrite($myfile, $filteroperator0);


    $filterdatafield1 = $_GET['filterdatafield1'] . "\n";

    fwrite($myfile, $filterdatafield1);


    $filtercondition1 = $_GET['filtercondition1'] . "\n";

    fwrite($myfile, $filtercondition1);


    $filtervalue1 = $_GET['filtervalue1'] . "\n";

    fwrite($myfile, $filtervalue1);


    $filteroperator1 = $_GET['filteroperator1'] . "\n";

    fwrite($myfile, $filteroperator1);


    fclose($myfile);

}

그러면 텍스트 파일의 내용은 다음과 같다.


2

ShippedDate

LESS_THAN

7/20/1996

0

ShippedDate

GREATER_THAN

7/10/1996

0



필터를 두 개의 컬럼에 주면 서버에 전달해 주는 값이 계속 늘어 난다.


data_05.php

<?php

#Include the connect.php file

include ('../connect.php');


// Connect to the database

$dbconn = pg_connect($conn_string) or die('Could not connect: ' . pg_last_error());


$query = "SELECT OrderDate, ShippedDate, ShipName, ShipAddress, ShipCity, ShipCountry FROM Orders";


// filter data.

if (isset($_GET['filterscount']))

{

    $filterscount = $_GET['filterscount'];

    if ($filterscount > 0)

    {

        $where = " WHERE (";


        $tmpdatafield = "";

        $tmpfilteroperator = "";


        for ($i = 0; $i < $filterscount; $i++)

        {

            // get the filter's column.

            $filterdatafield = $_GET["filterdatafield" . $i];

            // get the filter's condition.

            $filtercondition = $_GET["filtercondition" . $i];

            // get the filter's value.

            $filtervalue = $_GET["filtervalue" . $i];

            // get the filter's operator.

            $filteroperator = $_GET["filteroperator" . $i];


            if ($tmpdatafield == "")

            {

                $tmpdatafield = $filterdatafield;

            }

            else if ($tmpdatafield == $filterdatafield)

            {

                if ($tmpfilteroperator == 0)

                {

                    $where.= " AND ";

                }

                else $where.= " OR ";

            }

            else if ($tmpdatafield <> $filterdatafield)

            {

                $where.= ") AND (";

            }


            // build the "WHERE" clause depending on the filter's condition, value and datafield.

            switch ($filtercondition)

            {

                case "CONTAINS":

                    $condition = " LIKE ";

                    $value = "%{$filtervalue}%";

                    break;

                case "DOES_NOT_CONTAIN":

                    $condition = " NOT LIKE ";

                    $value = "%{$filtervalue}%";

                    break;

                case "EQUAL":

                    $condition = " = ";

                    $value = $filtervalue;

                    break;

                case "NOT_EQUAL":

                    $condition = " <> ";

                    $value = $filtervalue;

                    break;

                case "GREATER_THAN":

                    $condition = " > ";

                    $value = $filtervalue;

                    break;

                case "LESS_THAN":

                    $condition = " < ";

                    $value = $filtervalue;

                    break;

                case "GREATER_THAN_OR_EQUAL":

                    $condition = " >= ";

                    $value = $filtervalue;

                    break;

                case "LESS_THAN_OR_EQUAL":

                    $condition = " <= ";

                    $value = $filtervalue;

                    break;

                case "STARTS_WITH":

                    $condition = " LIKE ";

                    $value = "{$filtervalue}%";

                    break;

                case "ENDS_WITH":

                    $condition = " LIKE ";

                    $value = "%{$filtervalue}";

                    break;

                case "NULL":

                    $condition = " IS NULL ";

                    $value = "%{$filtervalue}%";

                    break;

                case "NOT_NULL":

                    $condition = " IS NOT NULL ";

                    $value = "%{$filtervalue}%";

                    break;

            }

            $where.= " " . $filterdatafield . $condition . " '" . $value . "' ";


            if ($i == $filterscount - 1)

            {

                $where.= ")";

            }

            $tmpfilteroperator = $filteroperator;

            $tmpdatafield = $filterdatafield;

            }

        // build the query.

        $query = "SELECT OrderDate, ShippedDate, ShipName, ShipAddress,

                            ShipCity, ShipCountry

                    FROM Orders" . $where;

    }

}


// Performing SQL query

$result = pg_query($query) or die('Query failed: ' . pg_last_error());


while ($line = pg_fetch_array($result, null, PGSQL_ASSOC)) {

    //echo var_dump($line);

    $orders[] = array(

        'OrderDate'   => $line["orderdate"],

        'ShippedDate' => $line["shippeddate"],

        'ShipName'    => $line["shipname"],

        'ShipAddress' => $line["shipaddress"],

        'ShipCity'    => $line["shipcity"],

        'ShipCountry' => $line["shipcountry"]

    );

}



//echo var_dump($orders);

echo json_encode($orders);


// Free resultset

pg_free_result($result);


// Closing connection

pg_close($dbconn);

?>


jqxgrid_05.html

<!DOCTYPE html>

<html lang = "ko">

<head>

    <title>jqWidgets jqxGrid 05</title>

    <meta charset="UTF-8">


    <!-- add one of the jQWidgets styles -->

    <link rel="stylesheet" href="../jqwidgets-ver5.3.2/jqwidgets/styles/jqx.base.css" type="text/css" />

    <link rel="stylesheet" href="../jqwidgets-ver5.3.2/jqwidgets/styles/jqx.darkblue.css" type="text/css" />

    <link rel="stylesheet" href="../jqwidgets-ver5.3.2/jqwidgets/styles/jqx.classic.css" type="text/css" />


    <!-- add the jQuery script -->

    <script type="text/javascript" src="../jqwidgets-ver5.3.2/scripts/jquery-1.11.1.min.js"></script>


    <!-- add the jQWidgets framework -->

    <script type="text/javascript" src="/jqwidgets-ver5.3.2/jqwidgets/jqxcore.js"></script>


    <!-- add one or more widgets -->

    <script type="text/javascript" src="../jqwidgets-ver5.3.2/jqwidgets/jqxcore.js"></script>

    <script type="text/javascript" src="../jqwidgets-ver5.3.2/jqwidgets/jqxbuttons.js"></script>

    <script type="text/javascript" src="../jqwidgets-ver5.3.2/jqwidgets/jqxscrollbar.js"></script>

    <script type="text/javascript" src="../jqwidgets-ver5.3.2/jqwidgets/jqxmenu.js"></script>

    <script type="text/javascript" src="../jqwidgets-ver5.3.2/jqwidgets/jqxgrid.js"></script>

    <script type="text/javascript" src="../jqwidgets-ver5.3.2/jqwidgets/jqxgrid.selection.js"></script>

    <script type="text/javascript" src="../jqwidgets-ver5.3.2/jqwidgets/jqxgrid.filter.js"></script>

    <script type="text/javascript" src="../jqwidgets-ver5.3.2/jqwidgets/jqxdata.js"></script>

    <script type="text/javascript" src="../jqwidgets-ver5.3.2/jqwidgets/jqxlistbox.js"></script>

    <script type="text/javascript" src="../jqwidgets-ver5.3.2/jqwidgets/jqxdropdownlist.js"></script>


    <script type="text/javascript">

        $(document).ready(function () {

            // prepare the data

            var theme = 'classic';

            var source =

            {

                datatype: "json",

                datafields:

                [

                    { name: 'OrderDate', type: 'date' },

                    { name: 'ShippedDate', type: 'date' },

                    { name: 'ShipName' },

                    { name: 'ShipAddress' },

                    { name: 'ShipCity' },

                    { name: 'ShipCountry' }

                ],

                url: 'data_05.php',

                filter: function () {

                    // update the grid and send a request to the server.

                    $("#jqxgrid").jqxGrid('updatebounddata', 'filter');

                }

            };


            var dataAdapter = new $.jqx.dataAdapter(source);


            // initialize jqxGrid

            $("#jqxgrid").jqxGrid(

            {

                width : 900,

                source: dataAdapter,

                theme: theme,

                filterable: true,

                columns:

                [

                    { text: 'Order Date',   datafield: 'OrderDate',   cellsformat: 'yyyy-mm-dd', width: 100 },

                    { text: 'Shipped Date', datafield: 'ShippedDate', cellsformat: 'yyyy-mm-dd', width: 100 },

                    { text: 'Ship Name',    datafield: 'ShipName',                               width: 200 },

                    { text: 'Address',      datafield: 'ShipAddress',                            width: 180 },

                    { text: 'City',         datafield: 'ShipCity',                               width: 100 },

                    { text: 'Country',      datafield: 'ShipCountry',                            width: 140 }

                ]

            });

        });

    </script>

</head>

<body class='default'>

    <div id="jqxgrid"></div>

</body>

</html>


결과 화면

위와 같이 필터를 주면 아래와 같은 화면이 나온다.


data_05.php

jqxgrid_05.html



+ Recent posts