easyui datagrid 数据源获取与表格渲染 demo1 demo2

来源:互联网 发布:2015年天猫双十一数据 编辑:程序博客网 时间:2024/06/05 19:16
demo1:表格和数据同步
$(function() {//queryData('','','','','',1,10);//$('#gcStateId').combobox('setValue', '');$('#gcTypeId').combobox('setValue','');    //});//var queryByCondition=function(){var pageopt = $('#mygrid').datagrid('getPager').data("pagination").options;queryData($("#gcCodeId").val(),$("#gcNameId").val(),$("#gcTypeId").combobox('getValue'),$("#gcStateId").combobox('getValue'),'',pageopt.pageNumber,pageopt.pageSize);}//var queryByConditionChangePagesize=function(){var pageopt = $('#mygrid').datagrid('getPager').data("pagination").options;queryData($("#gcCodeId").val(),$("#gcNameId").val(),$("#gcTypeId").combobox('getValue'),$("#gcStateId").combobox('getValue'),'',1,pageopt.pageSize);}//function queryData(gcCode,gcName,gcType,gcState,gcAddr,pageNumberV,pageSizeV){$('#mygrid').datagrid({loading:false,url : sunny.contextPath + '/codeCompile/list.do',queryParams:{            pageNumber:pageNumberV,    pageSize:pageSizeV,            gcCode:gcCode,            gcName:gcName,            gcType:gcType,            gcState:gcState,            gcAddr:gcAddr            },                                               striped : true,rownumbers : true,pagination : true,//分页必设singleSelect: false,            selectOnCheck: true,            checkOnSelect: true,fitColumns : true,fit:true,//idField : 'gcId',//sortName : 'gcCode', //sortOrder : 'desc',    pageNumber:pageNumberV,        pageSize:pageSizeV,        pageList : [ 5,10,20,30,50,100],frozenColumns : [ [ //固定列放置处,暂不放 ] ], toolbar : ["-",{      text: '新增',                  iconCls: 'icon-add',                  handler: function(){      addCodeFun();      }    },"-",{     text: '批量审核',                 iconCls: 'icon-edit',                 handler: function(){     auditMultiCodeFun();     }    },"-",{     text: '批量删除',                 iconCls: 'icon-remove',                 handler: function(){    removeMultiInfoFun();     }    }],columns : [ [     {title : '主键',field : 'gcId',hidden : true},{width : '40',title: '<input id=\"chkAllId\" type=\"checkbox\"   >',field : 'codeChk',formatter: function (value, rec, rowIndex) {                        return "<input type=\"checkbox\"  name=\"chkName\"  value=\"" + rec.gcId +"_"+ rec.gcState+"\" >";                }}, {width : '120',title : '工程编码',field : 'gcCode',sortable : false}, {width : '300',title : '工程名称',field : 'gcName',sortable : false},{width : '100',title : '工程类型',field : 'gcType',sortable : false},{width : '120',title : '所在区域',field : 'gcArea',sortable : false},/**暂不显示省市县2015-06-29 {width : '250',title : '县区',field : 'county',sortable:false},  * {width : '150',title : '省份',field : 'province',sortable : true}, {width : '50',title : '城市',field : 'city',sortable : true}, {width : '250',title : '县区',field : 'county',sortable:true}, {width : '150',title : '工程地址',field : 'address',sortable : true},*/{width : '120',title : '当前状态',field : 'gcState',sortable : false,formatter:function(value,row){return value;//alert('value:'+value);//if(value==0){//return '已注册';//}else if(value==1){//return '审核通过';//}//else if(value==2){//return '审核未通过';//}//else{////return '--';//return value;//}}}, {width : '150',title : '列入普查名录',field : 'gcInclude',sortable : false,formatter:function(value,row){if(value==0){return '未列入';}else if(value==1){return '已列入';}else{return value;}}}, {title : '操作',field : 'action',formatter : function(value, row, index) {var str = '';//if (securityUtil.havePermission("/security/user!getById")) {%>str += sunny.formatString('<img class="iconImg ext-icon-note" title="查看" onclick="showFun(\'{0}\');"/>', row.gcId);//}%>//if (securityUtil.havePermission("/security/user!update")) {%>str += sunny.formatString('<img class="iconImg ext-icon-note_edit" title="编辑" onclick="editFun(\'{0}\');"/>', row.gcId);//}%>//if (securityUtil.havePermission("/security/user!grantRole")) {%>if(row.gcState=='已注册'){str += sunny.formatString('<img class="iconImg ext-icon-user" title="审核" onclick="auditCodeFun(\'{0}\',\'{1}\');"/>', row.gcId,row.gcState);}else{str += sunny.formatString('<img class="iconImg ext-icon-user_gray2" title="审核" onclick="auditCodeFun(\'{0}\',\'{1}\');"/>', row.gcId,row.gcState);}//}%>//if (securityUtil.havePermission("/security/user!grantOrganization")) {%>//str += sunny.formatString('<img class="iconImg ext-icon-group" title="用户机构" onclick="grantOrganizationFun(\'{0}\');"/>', row.gcId);//}%>//if (securityUtil.havePermission("/security/user!delete")) {%>str += sunny.formatString('<img class="iconImg ext-icon-note_delete" title="删除" onclick="removeFun(\'{0}\');"/>', row.gcId);//}%>return str;}} ] ],//toolbar : '#toolbar',loadMsg:'数据加载中....',onLoadSuccess : function(data) {isDatagridEmpty_code(data.total);$(this).datagrid("fixRownumber");$('.iconImg').attr('src', sunny.pixel_0);//全选$("#chkAllId").unbind();    $("input[name='chkName']").unbind().bind("click", function () {                     var totolrows = $("input[name='chkName']").length;                     var checkrows = $("input[name='chkName']:checked").length;                     if (checkrows == totolrows) {                         $("#chkAllId").prop("checked",true);                     }                     else {                         $("#chkAllId").prop("checked", false);                     }                 });                   $("#chkAllId").click(function () {                       if ($(this).prop('checked') == true) {                           $("input[name='chkName']").prop("checked", true);                       } else {                           $("input[name='chkName']").prop("checked", false);                       }                   });               //},    onDblClickRow: function (rowIndex, rowData) {  showFun(rowData.gcId);//双击datagrid行事件    }});//获取页面分页对象    var p = $('#mygrid').datagrid('getPager');        $(p).pagination({      beforePageText: '第',            afterPageText: '页 共 {pages}页',            displayMsg: '显示 {from}到{to} ,共 {total}条记录',            onSelectPage:function (pageNumber,pageSize) {       queryByCondition();           },           onChangePageSize:function (pageSize) {        //queryByCondition();        queryByConditionChangePagesize();           }        });//}//var queryByConditionReset=function(){$("#gcCodeId").val('');$("#gcNameId").val('');$("#gcTypeId").combobox('setValue','');$("#gcStateId").combobox('setValue','');//var len=$('#mygrid').datagrid('getRows').length;//if(len==0){//$('#mygrid').datagrid('loadData', { total: 0, rows: [] });//清空下方DateGrid //}}//var searchByCondition = function(id) {parent.$.messager.confirm('系统提示', '您确定要删除此记录?', function(r) {if (r) {$.post(sunny.contextPath + '/security/user!delete.action', {id:id}, function() {//mygrid.datagrid('reload');}, 'json');}});}; // function isDatagridEmpty_code(total){var interval;var time=1000;var x=3;if(total==0){$.messager.alert(' ','<font size=\"2\" color=\"#666666\"><strong>数据库暂无记录!</strong></font>','infoSunnyIcon',function(){//alert('点击确定按钮才关闭');//});$(".panel-title").append("系统提示("+x+"秒后自动关闭)");interval=setInterval(fun,time);function fun(){--x;if(x==0){  $(".messager-body").window('close');}$(".panel-title").text("");$(".panel-title").append("系统提示("+x+"秒后自动关闭)");}}   }    //var removeFun = function(id) {parent.$.messager.confirm('系统提示', '您确定要删除此记录?', function(r) {if (r) {$.post(sunny.contextPath + '/codeCompile/delById.do', {id : id}, function(result) {if(result.success){$.messager.alert('系统提示','<font size=\"2\" color=\"#666666\"><strong>删除成功!</strong></font>','successSunnyIcon',function(){queryByCondition();});}else{$.messager.alert('系统提示','<font size=\"2\" color=\"#666666\"><strong>删除失败!</strong></font>','errorSunnyIcon');}}, 'json');}});};/** * 批量删除 */var removeMultiInfoFun = function() { //只有选中至少一项时才会执行each方法    var idStr = "";var items = $("input[name='chkName']:checked");        $.each(items, function (index, item) {            var str=item.value.toString();        var ss=str.indexOf("_");        var idString=str.substring(0,ss);//gcId        //var stateString=str.substr(ss+1);//gcState        idStr = idString+","+idStr;        });        //        var checkrows = $("input[name='chkName']:checkbox:checked").length;        //if(''==idStr){$.messager.alert('系统提示','<font size=\"2\" color=\"#666666\"><strong>请至少选中一条记录,然后再来执行此操作!</strong></font>','warningSunnyIcon');return;}parent.$.messager.confirm('系统提示', '您确定要删除这<font size=\"2\" color=\"#FF0000\"><strong>'+checkrows+'</strong></font>条记录吗?', function(r) {if (r) {$.post(sunny.contextPath + '/codeCompile/delMultiByIds.do', {ids : idStr.substring(0,idStr.length-1)}, function(result) {if(result.success){$.messager.alert('系统提示','<font size=\"2\" color=\"#666666\"><strong>删除成功!</strong></font>','successSunnyIcon',function(){queryByCondition();});}else{$.messager.alert('系统提示','<font size=\"2\" color=\"#666666\"><strong>删除失败!</strong></font>','errorSunnyIcon');}}, 'json');}});};/** * 查看信息 * @param {Object} id */var showFun = function(id) {//if(true){alert('id='+id);return;}var dialog = parent.sunny.modalDialog({id:'codeViewDialogId',title : '查看工程编码信息',width:650,height:300,url : sunny.contextPath + '/pages/sysmanage/code_view.jsp?codeInfoId=' + id,buttons : [ {text : '<font color=\"#000000\">取消</font>',handler : function() {//关闭本窗口    parent.$('#codeViewDialogId').dialog('close');}} ]});}; /** * 编辑信息 * @param {Object} id */var editFun = function(id) {//alert('id='+id);var dialog = parent.sunny.modalDialog({id:'codeEditDialogId',title : '编辑工程编码信息',width:650,height:330,url : sunny.contextPath + '/pages/sysmanage/code_edit.jsp?codeInfoId=' + id,buttons : [ {text : '<font color=\"#0000ff\">确定</font>',handler : function() {dialog.find('iframe').get(0).contentWindow.submitForm(dialog, mygrid, parent.$,queryByCondition);                }}, {text : '<font color=\"#0000ff\">取消</font>',handler : function() {//关闭本窗口    parent.$('#codeEditDialogId').dialog('close');}} ]});};/** * 审核信息 * @param {Object} id */var auditCodeFun = function(id,gcState) {if(gcState=='已注册'){//可以审核var dialog = parent.sunny.modalDialog({id:'codeAuditDialogId',title : '审核工程编码信息',width:650,height:330,url : sunny.contextPath + '/pages/sysmanage/code_audit.jsp?codeInfoId=' + id+"&gcState="+1,buttons : [ {text : '<font color=\"#000000\">确定</font>',handler : function() {dialog.find('iframe').get(0).contentWindow.submitForm(dialog, mygrid, parent.$,queryByCondition);}}, {text : '<font color=\"#000000\">取消</font>',handler : function() {//关闭本窗口    parent.$('#codeAuditDialogId').dialog('close');}} ]});}else{//无法审核var dialog = parent.sunny.modalDialog({id:'codeAuditDialogId',title : '审核工程编码信息',width:650,height:330,url : sunny.contextPath + '/pages/sysmanage/code_audit.jsp?codeInfoId=' + id+"&gcState="+0,buttons : [ {text : '<font color=\"#000000\">取消</font>',handler : function() {//关闭本窗口    parent.$('#codeAuditDialogId').dialog('close');}} ]});}};/** * 批量审核 * @param {Object} id */var auditMultiCodeFun=function(){  var idStr = "";var items = $("input[name='chkName']:checked");        $.each(items, function (index, item) {        var str=item.value.toString();        var ss=str.indexOf("_");        var idString=str.substring(0,ss);//gcId        var stateString=str.substr(ss+1);//gcState        if(stateString=='已注册'){         idStr = idString+","+idStr;        }else{        //do nothing        }                    });        //if(''==idStr){$.messager.alert('系统提示','<font size=\"2\" color=\"#666666\"><strong>请至少选中一条\"<font color=\"#ff0000\" >未审核</font>\"的记录,然后再来执行此操作!</strong></font>','warningSunnyIcon');return;}//var dialog = parent.sunny.modalDialog({id:'codeAuditMultiDialogId',title : '批量审核工程编码信息',width:400,height:240,url : sunny.contextPath + '/pages/sysmanage/code_multiAudit.jsp?codeInfoId=' + idStr,buttons : [ {text : '<font color=\"#000000\">确定</font>',handler : function() {                dialog.find('iframe').get(0).contentWindow.submitForm(dialog, mygrid, parent.$,queryByCondition);}}, {text : '<font color=\"#000000\">取消</font>',handler : function() {//关闭本窗口    parent.$('#codeAuditMultiDialogId').dialog('close');}} ]});}/** * 新增 * @param {Object} id */var addCodeFun = function() {var dialog = parent.sunny.modalDialog({id:'codeAddDialogId',title : '新增工程编码',width:800,height:600,url : sunny.contextPath + '/pages/sysmanage/code_add.jsp',buttons : [ {text : '<font color=\"#000000\">确定</font>',handler : function() {dialog.find('iframe').get(0).contentWindow.submitForm(dialog, mygrid, parent.$,queryByCondition);}}, {text : '<font color=\"#000000\">取消</font>',handler : function() {//关闭本窗口    parent.$('#codeAddDialogId').dialog('close');}} ]});};



demo1:先数据后表格
var editIndexDutyVal = undefined;var dataSource=null;var dutyDataSource=null;var leaderDataSource=null;var dutyDataTreeSource=null;//$(function(){getDataSourceFun(4,1,'2015','07','340100');});//function getDataSourceFun(unitIdVal,normalFlagVal,year,month,dscdVal){$.messager.progress({title:'系统提示',msg:'数据加载中,请稍候...'});    $.post(sunny.contextPath + '/dutyManage/toAddMonthDuty.do', {    dscd:dscdVal,    unitId:unitIdVal,        year:year,        month:month,        flag:normalFlagVal //1-普通班,2-加强班}, function(result) {var success=result.success;if(success){    dataSource=result.rows;    dutyDataTreeSource=result.data0;    dutyDataSource=result.data1;   leaderDataSource=result.data2;   //获取数据源后,紧接着渲染表格   queryDutyDataFunNew(result.title);   }else{    $.messager.progress('close');    $.messager.alert('系统提示','<font size=\"2\" color=\"#666666\"><strong>'+result.info+'</strong></font>',    'warningSunnyIcon',function(){     parent.$('#monthDutyAddDialogId').dialog('close');    });    return;   }}, 'json');}//function queryDutyDataFunNew(titleVal){$('#mygrid').datagrid({title:titleVal,loading:false,striped : true,rownumbers : true,pagination : false,//分页必设singleSelect: true,            selectOnCheck: false,            checkOnSelect: false,fitColumns : true,fit:true,frozenColumns : [ [ //固定列放置处,暂不放 ] ], toolbar : ["-",{      text: '点击随机生成_加强班',                  iconCls: 'icon-randomRed',                  handler: function(){      addRandomStrongDuty(2);      }    },"-",{     text: '点击随机生成_普通班',                 iconCls: 'icon-randomYellow',                 handler: function(){     addRandomStrongDuty(1);     }    }],columns : [ [     {title : '主键',align:'center',styler: function(value,row,index){                   return 'vertical-align:middle;';                },field : 'dutyId',hidden : true},{width : '70px',title : '日期',align:'center',styler: function(value,row,index){                   return 'vertical-align:middle;';                },field : 'day',sortable : false}, {width : '50px',title : '星期',align:'center',styler: function(value,row,index){                   return 'vertical-align:middle;';                },field : 'weekDay',sortable : false},{width : '220px',title : '上午',align:'center',styler: function(value,row,index){                   return 'vertical-align:middle;';                },field : 'morningPeopleIds',sortable : false,formatter:function(value,row){return row.morningPeopleNames;},editor:{type:'combotree',options:{    cascadeCheck:true,                data: dutyDataTreeSource,valueField:'id',textField:'text',multiple:true,    panelHeight:'auto',    editable: false,    onlyLeafCheck:true,required:false}}},{width : '220px',title : '下午',align:'center',styler: function(value,row,index){                   return 'vertical-align:middle;';                },field : 'afternoonPeopleIds',sortable : false,formatter:function(value,row){return row.afternoonPeopleNames;},editor:{type:'combotree',options:{    cascadeCheck:true,                data: dutyDataTreeSource,valueField:'id',textField:'text',multiple:true,    panelHeight:'auto',    editable: false,    onlyLeafCheck:true,required:false}}},{width : '220px',title : '晚上',align:'center',styler: function(value,row,index){                   return 'vertical-align:middle;';                },field : 'eveningPeopleIds',sortable : false,formatter:function(value,row){return row.eveningPeopleNames;},editor:{type:'combotree',options:{    cascadeCheck:true,                data: dutyDataTreeSource,valueField:'id',textField:'text',multiple:true,    panelHeight:'auto',    editable: false,    onlyLeafCheck:true,required:false   // onSelect:function(node){        //  var tree = $(this).tree;        //  var isLeaf = tree('isLeaf', node.target);         //  if (!isLeaf) {       //        $(this).combotree('clear');       //   }      //}  }}},{width : '160px',title : '带班领导',align:'center',                styler: function(value,row,index){                   return 'vertical-align:middle;';                },field : 'leaderIds',sortable : false,formatter:function(value,row){return row.leaderNames;},editor:{type:'combobox',options:{                data:leaderDataSource,valueField:'personId',textField:'personName',multiple:true,    panelHeight:'auto',required:false}}}//,{//width : '40%',//title : '备注',//field : 'remark',//sortable : false//}] ],//toolbar : '#toolbar',loadMsg:'数据加载中....',onBeforeRender: function(target, rows){            //alert('2'); //$.each(rows,function(index,row){             //   alert("row"+row.data0);  //  dutyDataSource=row.data1;            //leaderDataSource=row.data2;            //return false;  // });              },onLoadSuccess : function(data) {               $.messager.progress('close');               if(null!=data){               mergeCellsFun(data);               }            ////$(this).datagrid("fixRownumber");$('.iconImg').attr('src', sunny.pixel_0);},rowStyler:function(index,row){if (row.weekDay=='星期六'||row.weekDay=='星期日'){return 'background-color:#ccffff;';}    },    onDblClickRow: function (rowIndex, rowData) {  //showFun(rowData.gcId);//双击datagrid行事件    },    onClickRow: function (index, rowData) {     //单击事件    if (editIndexDutyVal != index){if (endEditing()){//开始编辑状态=beginEditeditIndexDutyVal = index;$('#mygrid').datagrid('selectRow', index).datagrid('beginEdit', index);} else {$('#mygrid').datagrid('selectRow', editIndexDutyVal);}    }else{        }        }    });//绑定数据if(null!=dataSource){$('#mygrid').datagrid('loadData', dataSource);}}//function submitMonthDutyForm($dialog, $mygrid, $pjq,$selectTabByIndex){$.messager.progress({title:'系统提示',msg:'数据加载中,请稍候...'});var rows  = $('#mygrid').datagrid("getRows"); //post $.post(sunny.contextPath + '/dutyManage/addMonthDutyIntoDB.do', {   data:JSON.stringify(rows)}, function(result) {$.messager.progress('close');var success=result.success;if(success){ $.messager.alert('系统提示','<font size=\"2\" color=\"#666666\"><strong>'+result.info+'</strong></font>',    'warningSunnyIcon',function(){     parent.$('#monthDutyAddDialogId').dialog('close');    });   }else{    $.messager.alert('系统提示','<font size=\"2\" color=\"#666666\"><strong>'+result.info+'</strong></font>',    'warningSunnyIcon',function(){     parent.$('#monthDutyAddDialogId').dialog('close');    });   }}, 'json');}/** * 预新增 * @param {Object} id */var addInfoFun_duty = function() {var dialog = parent.sunny.modalDialog({id:'monthDutyAddDialogId',title : '添加月度排班',width:1000,height:600,url : sunny.contextPath + '/pages/duty/monthDuty_add.jsp',buttons : [ {text : '<font color=\"#000000\">确定</font>',handler : function() {dialog.find('iframe').get(0).contentWindow.submitMonthDutyForm(dialog, mygrid_main_Id, parent.$,selectTabByIndex);}}, {text : '<font color=\"#000000\">取消</font>',handler : function() {//关闭本窗口    parent.$('#monthDutyAddDialogId').dialog('close');}} ],onClose:function(){if(null==leaderDataSource){selectTabByIndex();}parent.$('#monthDutyAddDialogId').dialog('destory');},onLoad:function(){}});}// function isDatagridEmpty_duty_add(total){var interval;var time=1000;var x=3;if(total==0){$.messager.alert(' ','<font size=\"2\" color=\"#666666\"><strong>数据库暂无记录!</strong></font>','infoSunnyIcon',function(){//alert('点击确定按钮才关闭');//});$(".panel-title").append("系统提示("+x+"秒后自动关闭)");interval=setInterval(fun,time);function fun(){--x;if(x==0){  $(".messager-body").window('close');}$(".panel-title").text("");$(".panel-title").append("系统提示("+x+"秒后自动关闭)");}}   }//function endEditing(){if (editIndexDutyVal ==undefined){return true;}if ($('#mygrid').datagrid('validateRow', editIndexDutyVal)){var ed0 = $('#mygrid').datagrid('getEditor', {index:editIndexDutyVal,field:'morningPeopleIds'});var morningPeopleNames = $(ed0.target).combotree('getValue');$('#mygrid').datagrid('getRows')[editIndexDutyVal]['morningPeopleIds'] = morningPeopleNames;//var ed1 = $('#mygrid').datagrid('getEditor', {index:editIndexDutyVal,field:'afternoonPeopleIds'});var afternoonPeopleNames = $(ed1.target).combotree('getValue');$('#mygrid').datagrid('getRows')[editIndexDutyVal]['afternoonPeopleIds'] = afternoonPeopleNames;//var ed2 = $('#mygrid').datagrid('getEditor', {index:editIndexDutyVal,field:'eveningPeopleIds'});var eveningPeopleNames = $(ed2.target).combotree('getValue');$('#mygrid').datagrid('getRows')[editIndexDutyVal]['eveningPeopleIds'] = eveningPeopleNames;//var ed3 = $('#mygrid').datagrid('getEditor', {index:editIndexDutyVal,field:'leaderIds'});var leaderNames = $(ed3.target).combobox('getText');$('#mygrid').datagrid('getRows')[editIndexDutyVal]['leaderIds'] = leaderNames;//$('#mygrid').datagrid('endEdit', editIndexDutyVal);editIndexDutyVal = undefined;return true;} else {return false;}}//function addRandomStrongDuty(val){editIndexDutyVal = undefined;dataSource=null;dutyDataSource=null;leaderDataSource=null;dutyDataTreeSource=null;getDataSourceFun(4,val,'2015','07','340100');}//function mergeCellsFun(data){var mark = 0;//var rowspan_field = 'name';var colspan_field = 'morningPeopleIds';var colspan_field2 = 'afternoonPeopleIds';for (var i=0; i <data.rows.length; i++) {if (data.rows[i][colspan_field] == data.rows[i][colspan_field2]) {$('#mygrid').datagrid('mergeCells',{index: i,field: colspan_field,colspan:2});}}}

0 0
原创粉丝点击