有关angularjs操作前台数据无法刷新页面的问题

2014-11-12 05:19:55 1.4万阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

ST-Link V2的隐藏技能：多通道串口调试的终极指南本文深入探讨了ST-Link V2的多通道串口调试功能，突破传统烧录工具的限制。通过详细的硬件配置、Arduino IDE设置和实战案例，展示了如何利用SWD接口实现多通道数据监控，提升STM32F103C8T6等开发板的调试效率。文章还提供了PCB布局优化和性能调优技巧，助力开发者充分发挥ST-Link V2的潜能。阅读详情

首先这是我的前台页面效果：
[img=https://img-bbs.csdn.net/upload/201411/12/1415783075_246780.jpg][/img
当我第一次查询时，可以查询到如下结果出来，但是当我输入其他查询条件再次查询时，显示列表就无法更新了，下面是我的前台界面代码：
JSP代码（部分代码）;

<body >

<div class="page-content" ng-controller="TargetDefinedController">

      <div class="row">

           <form>

                 <div class="form-group col-sm-12">

                            <div class="widget-header">

                                    <h6>查询条件</h6>

                                        <a href="#" data-action="collapse">

                                            <i class="icon-chevron-up"></i>

                                        </a>

                                    </div>

                            </div>

                            <div class="widget-body">

                                    <div class="widget-main no-padding-right">

                                        <table>

                                            <tr>

                                                <th class="col-sm-1">

                                                    <div class="col-sm-10 form-group">

                                                        <label class="col-sm-2 col-md-3 no-padding-right" for="indexId">

                                                            元数据ID</label>

                                                        <input id="indexId" type="text" ng-model="tMetaData.indexId"/>

                                                    </div>

                                                </th>

                                                <th class="col-sm-1">

                                                    <div class="col-sm-10 form-group">

                                                        <label class="col-sm-2 col-md-3 no-padding-right" for="chName">

                                                            元数据中文名 </label>

                                                        <input id="chName" type="text" ng-model="tMetaData.chName"/>

                                                    </div>

                                                </th>

                                            </tr>

                                            <tr>

                                                <th class="col-sm-1">

                                                    <div class="col-sm-10 form-group">

                                                        <label class="col-sm-2 col-md-3 no-padding-right" for="enName">

                                                            元数据英文名 </label>

                                                        <input id="enName" type="text" ng-model="tMetaData.enName"/>

                                                    </div>

                                                </th>

                                                <th class="col-sm-1">

                                                    <div class="col-sm-10 form-group">

                                                        <label class="col-sm-2 col-md-3 no-padding-right" for="indexNature">

                                                            元数据性质 </label>

                                                        <select id="indexNature" class="col-sm-6" ng-model="tMetaData.indexNature">

                                                            <option value="{{index}}" ng-repeat="index in indexNatures">{{index}}</option>

                                                        </select>

                                                    </div>

                                                </th>

                                            </tr>

                                            <tr>

                                                <th class="col-sm-1">

                                                    <div class="col-sm-10 form-group">

                                                        <label class="col-sm-2 col-md-3 no-padding-right" for="businessApplications">

                                                            业务应用领域 </label>

                                                        <select id="businessApplications" class="col-sm-6" ng-model="tMetaData.businessApplications">

                                                            <option value="{{business}}" ng-repeat="business in Business">{{business}}</option>

                                                        </select>

                                                    </div>

                                                </th>

                                            </tr>

                                            <tr>

                                                <th class="col-sm-1">

                                                    <div class="col-sm-10 form-group"> 

                                                        <button class="btn btn-sm btn-primary" ng-click="search()">

                                                            <i class="icon-ok bigger-110"></i>查询

                                                        </button>

                                                    </div>

                                                </th>

                                            </tr>

                                        </table>

                                    </div>

                                </div>

                           </div>

                           <table id="data-check-info-grid"></table>

                           <div id="data-check-grid-pager"></div>

                 </div>

           </form>

      </div>

</div>

</body>

JS代码（部分）：



var targetDefinedApp = {

    controller: {}

};



targetDefinedApp.controller.TargetDefinedController = function ($scope, $compile, $http) {



    $scope.tMetaData = {};



    $scope.search= function () {

        $http({

            method : 'POST',

            url : '../TargetDefined/showTargetDefined.do',

            data : JSON.stringify($scope.tMetaData),  // pass in data as strings

            headers : { 'Content-Type': 'application/json;charset=utf-8' }

        }).success(function(message) {



            if (message.status=='success') {

//                jQuery("#data-check-info-grid").clearGridData();//每次查询数据前先清空表格数据

                targetDefinedApp.showTargetDefined($scope,message);

                $("#data-check-info-grid").trigger("reloadGrid");//每次查询之后再刷新数据，也就是重新加载数据

            } else {

                alert("操作失败："+message.errMsg);

                return;

            }

        });

    }

}



//数据元显示列表以及增删改查实现



targetDefinedApp.showTargetDefined=function($scope,message){

//    jQuery("#data-check-info-grid").clearGridData();//每次查询数据前先清空表格数据

    jQuery(function ($) {

        var grid_selector = "#data-check-info-grid";//table所对应的id

        var pager_selector = "#data-check-grid-pager";//page所对应的id

        url='../TargetDefined/showTargetDefined.do';

        datatype='local';

        data=message.data;

        mtype='POST';

        title='';



        showTargetDefinedGrid(grid_selector,pager_selector,url,datatype,data,mtype,title);//调用表格定义以及数据显示js



        jQuery(grid_selector).jqGrid('navGrid',pager_selector,

            {

                edit : true,

                editicon: 'icon-pencil blue',

                add: true,

                addicon: 'icon-plus-sign purple',

                del : true,

                delicon: 'icon-trash red',

                search : true,

                searchicon: 'icon-search orange',

                refresh: true,

                refreshicon : 'icon-refresh green'



            },

            {

                //编辑操作

            },



            {

               //添加操作

                

            },



            {

                //删除操作

            }

                    });

                }

            }

        );



    })

};



angular.module('targetDefinedApp', ['ngResource', 'ngRoute', 'ngCookies', 'ngSanitize', 'ngAnimate']).

    config(function ($locationProvider, $httpProvider) {

        $locationProvider.html5Mode(true).hashPrefix('!');

    })

    .controller(targetDefinedApp.controller)

;

我前台数据控制是通过angularjs来实现的，但是为什么会出现数据列表不刷新的情况呢，
我在网上也找了好多办法，都说是列表要先清空在填充数据，之后我就用了这样一段代码来试试，结果还是没用

jQuery("#data-check-info-grid").clearGridData();//每次查询数据前先清空表格数据

或者：$("#data-check-info-grid").trigger("reloadGrid");//每次查询之后再刷新数据，也就是重新加载数据

始终还是无法解决啊，大神们该怎么办呢？？？？急急急啊！！！！

...全文

FPGA远程升级避坑指南：用AXI Quad SPI IP读写N25Q128 Flash的完整流程本文详细介绍了FPGA远程升级过程中使用AXI Quad SPI IP读写N25Q128 Flash的完整流程，包括IP核配置、Flash操作指令集、双镜像备份设计及生产级远程升级协议。通过最佳实践和避坑策略，帮助开发者实现可靠的镜像更新方案，提升系统可靠性和可维护性。阅读详情

zzm105

JavaScript 87,983 成员 224,681 内容

+ 关注 + 加入社区

有关angularjs操作前台数据无法刷新页面的问题

相关推荐