easyUI使用心得

1.表格列表

<table id="customer_index_datagrid" >

</table>

<div id="customer_index_toolbar" style="padding:5px;height:auto">
            <div style="margin-bottom:5px">
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add', plain:true" onclick="addCustomer()">新增</a>
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save', plain:true" onclick="editCustomerStaff()">分配</a>
            </div>
            <div>
                <form id="customer_index_search" action="">                    
                    <select class="easyui-combobox" name="is_close" data-options="label:'状态:',width:130,panelHeight:'auto',editable:false">
                        <option value="">全部</option>
                        <option value="0">未封存</option>
                        <option value="1">已封存</option>
                    </select>
                    <input class="easyui-textbox" name="keyword" data-options="label:'搜索:',width:200,prompt:'输入名称或手机号'">
                    <a href="#" class="easyui-linkbutton" iconCls="icon-search" data-options="onClick:search">搜索</a>
                </form>
            </div>
  </div>

<script>

$('#customer_index_datagrid').datagrid({
        url: '{:U("customer/index")}',                 //请求地址
        queryParams: initSearchParams,     //参数
        idField: 'cust_id',                                  //标识字段
        fit: true,                                                  //当设置为true的时候面板大小将自适应父容器
        fitColumns: true,                                 //真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动
        singleSelect: true,              //  如果为true，则只允许选择一行        
        rownumbers: true,             //如果为true，则显示一个行号列
        pagination: true,         //如果为true，则在DataGrid控件底部显示分页工具栏
        border: false,             //定义是否显示面板边框
        pageSize: c_page_size, //在设置分页属性的时候初始化页面大小
        pageList: c_page_list,    //在设置分页属性的时候初始化页面大小
        toolbar: '#customer_index_toolbar', //顶部工具栏的DataGrid面板
        columns: [[                           //DataGrid列配置对象
            {field: 'ck', checkbox:true},
            {field: 'cust_code', title: '代码', align: 'center', sortable: true},
            {field: 'area', title: '地区', width:100, align: 'left', formatter: customerArea},
            {field: 'dataGridBtn', title: '操作', align: 'center', formatter: customerBtn},
        ]],
        onLoadSuccess: function () {//加载成功

        },
        onSelect: function(row) {//选择某一行的数据触发事件
             
        }
    });

</script>

PHP端代码

 public function indexAction()
    {
        if (IS_POST) {
            $page = I('page', 1);
            $rows = I('rows', 20);
            $sort = I('sort', 'reg_time');
            $order = I('order', 'desc');

            //搜索数据得到列表

         

            $this->ajaxReturn(array('rows' => $list, 'total' => $count));

        }else{

$this->display();

        }

}