easyui datagrid展示列表数据

目的，点击窗口中的输入框，再弹出一个子窗口，可以选择类路径，点击确定后，自动填入父窗体的输入框

一、先在父窗口创建点击事件

<td class="kv-content">
    <input id="beanClass" name="beanClass" class="easyui-validatebox"  onclick="popClassCron()" />
</td>

function popClassCron(){
    var dialog = parent.sy.modalDialog({
        title: '选择类路径',
        height: '450',
        url: sy.contextPath + '/manage/dynamicClassCron.jsp',
        buttons: [{
            text: '确定',
            handler: function () {
                var d = dialog.find('iframe').get(0).contentWindow;
                var bean_class = $("#bean_class",d.document).val();
                var method_name = $("#method_name",d.document).val();
                if(bean_class == ''){
                    parent.$.messager.alert('提示框','请选择一个类!','warning');
                }else{
                    $('#beanClass').val(bean_class);
                    $('#methodName').val(method_name);
                    dialog.dialog('destroy');
                }
            }
        }]
    });
}

二、编写dynamicClassCron.jsp页面

<script>
    $(function() {
        var queryField=$("#queryField").val();
        var queryValue=$.trim($("#queryValue").val());

        var params = {"queryField":queryField,"queryValue":queryValue};
        grid = $('#grid').datagrid({
            url : sy.contextPath + '/scheduleJobController/findClassesList_noSecurity',
            fit : true,
            fitColumns : true,
            pagination : true,
            queryParams:params,
            pageSize : 20,
            pageList : [ 20, 50, 100],
            rownumbers : true,
            nowrap : false,
            singleSelect:true,//单选
            // striped : true,//单双行效果
            columns : [ [
                {field:'class_id',checkbox:true,formatter:function (val,row){
                        console.info(val);
                    }},
                {field:'bean_class',title:'类名',align: 'center',width:200,formatter:function (val,row) {
                        if(val == null){
                            return null;
                        }else{
                            var valArray = val.split('.');
                            var len = val.split('.').length;
                            var finalClass = valArray[len-1];
                            return "<span title='"+val+"'>"+finalClass+"</span>";
                        }
                    }
                },
                {field:'method_name',title:'方法名',align: 'center',width:100,formatter:function (val,row) {
                        if(val == null){
                            return null;
                        }else{
                            return "<span title='"+val+"'>"+val+"</span>";
                        }
                    }
                },
                {field:'description',title:'描述',align: 'center',width:100,formatter:function (val,row) {
                        if(val == null){
                            return null;
                        }else{
                            return "<span title='"+val+"'>"+val+"</span>";
                        }
                    }
                }
            ]],
            toolbar : '#toolbar',
            onBeforeLoad : function(param) {
                parent.$.messager.progress({
                    text : '数据加载中....'
                });
            },
            onClickRow:function(rowIndex, rowData){
                var bean_class = rowData["bean_class"];
                var method_name = rowData["method_name"];

                $("#bean_class").val(bean_class);
                $("#method_name").val(method_name);
            },
            onLoadSuccess : function(data) {
                $("#grid").parent().find("div.datagrid-header-check").children("input[type='checkbox']").eq(0).attr("style", "display:none;");
                parent.$.messager.progress('close');
            }
        });
    });

    //查询按钮
    function doSearch(){
        $('#grid').datagrid("load",{
            queryField:$("#queryField").val(),
            queryValue:$.trim($("#queryValue").val())
        });
    }

    //刷新按钮
    function doRefresh(){
        $('#grid').datagrid("load",{
            queryField:$("#queryField").val(),
        });
        $('#queryValue').val('');
    }
</script>

*注意： columns :field 的字段用来接收数据，必须和后台传输的字段名一致，若后台用的sql查询，则字段名与数据库字段小写一致，如果后台用hql查询，则和对应类的名字一样。

三、java代码

EasyDataGrid grid = new EasyDataGrid();
StringBuilder sqlConn = new StringBuilder();
StringBuilder sqlCount = new StringBuilder();
String queryValue = dto.getQueryValue();
String queryFiled = dto.getQueryField();

sqlConn.append("select * from T_RUN_SCHEDULE_CLASS where 1=1");
if(StringUtil.isNotNull(queryValue)){
    if (queryFiled.equals("bean_class")){
        sqlConn.append(" and regexp_substr(bean_class, '[^.]+', 1, regexp_count(bean_class,'[^.]+'))  in (" +
                "select * from(select regexp_substr(bean_class, '[^.]+', 1, regexp_count(bean_class,'[^.]+'))"+
                "class  from T_RUN_SCHEDULE_CLASS) where class like '%").append(queryValue).append("%')");
    }else {
        sqlConn.append(" and ").append(queryFiled).append(" like '%").append(queryValue).append("%'");
    }
}

sqlCount.append("select count(*)  from(").append(sqlConn.toString()).append(")");
Long total = this.countBySql(sqlCount.toString());
List rows = this.findBySql(sqlConn.toString(),dto.getPage(),dto.getRows());
grid.setTotal(total);
grid.setRows(rows);

return grid;

queryFiled 是dynamicClassCron.jsp页面中的查找类型

queryValue 是dynamicClassCron.jsp页面中的输入框用户设置的查找条件

total 和 rows是easyui 可以接受的分页参数，grid.setTotal(total) 、grid.setRows(rows);便可以实现分页，但前提是查找rows时要将dto参数放到sql语句中。

四、总结

1、我在dynamicClassCron.jsp中引入了bootstrap却没用，导致布局不理想

2、sql查询是用原生sql语句，表名字段名必须和数据库一致；hql语句是与对象映射的语句，表名和字段名都是类名和类属性

3、field中的数据可以筛选，用formatter:function（val,row）{ 条件 }即可