grid联动的一个优化实现

最近做了一个数据上报的页面，用的miniUI的layout布局下datagrid的来实现。因为项目时间不是那么紧张，加上一些别的bug修改，又报了而一个英语培训班，所以直到今天才算是完成了这个所谓的销售异常上报，本人入门级选手，博客园高手如云，如果能够不吝指点，感激不尽，欢迎拍砖！

如图所示：涉及到三个datagrid，分别命名为：name_grid（这个grid根据用户Id以及用户所注册的上报内容来获取到具体加油站的Id和Name），detail_grid（在这个grid里则要获取到具体加油站的详细信息，如上报状态，以及是否停报等），content_grid（这个grid则是所要调查的内容的相关信息）。

遇见问题一：name_grid和detail_grid，刚开始的时候的思路是直接一次获取到所有的信息来一次性加载这两个datagrid，但是由于detail_grid需要对加油站的“上报状态”进行控制改变，而“上报状态”则是从数据库另一个上报的表里获取到的，如果是新注册用户的话没有上报过，则该用户的在这个上报表里没有数据，此时问题就出现了，如果想一次性获取到所有的信息来一次性加载这两个datagrid，当用户是新注册用户的时候，整个页面加载的时候加载不到数据，所以还只能分开实现，首先获取到name_grid所需要的信息，然后通过name_grid的onSelectionChanged事件来加载detail_grid和content_grid的数据。

定义了一个XsycObject类，这里定义需要在name_grid和detail_grid中需要用到的数据
public  class XsycObject
    {
        public string GasStationID { get; set; }
              
        public string Name { get; set; }

        public string Organization { get; set; }

        public string RecordStatus { get; set; }

        public string QuestionnaireID { get; set; }

        public string ReportDate { get; set; }

    }

 

 
定义一个接口
interface  IXsycInfo
    {
        List<XsycObject> XiaoShouYiChang { get; set; }
    }
此类继承上面的接口
 class xsyc_info : ReportInfo, IXsycInfo
    {
        public List<XsycObject> XiaoShouYiChang
        {
            get;
            set;
        }
    }

 protected override IReportInfo getReportInfo(DateTime reportDate, Dictionary<string, string> parameters)
        {
            string sql = string.Empty;
            xsyc_info info = new xsyc_info();
            List<XsycObject> xsycinfos = new List<XsycObject>();
//通过对parameters是否为null来判断是获取的name_grid的信息还是detail_grid的信息
            if (parameters == null)
            {
.....
这里把获取到的数据放到xsyc_info返回
return info;

           
在前台JS中初始化页面的时候加载name_grid数据
//加载左侧 加油站信息
            var grid = mini.get("name_grid");
            if (info.XiaoShouYiChang) {
                grid.addRows(info.XiaoShouYiChang);
                grid.accept(); //清除行修改的痕迹，不然会带有背景色
                grid.select(0); //默认选中第一行

这样就可以获取name_grid的数据了。接下来在onSelectionChanged事件来加载detail_grid和content_grid的数据。

遇见问题二：content_grid里面的Radio的如何实现：

这里是在“选项”下面的实现，通过拼接Radio来实现，每一个选项对应一个唯一的Id
       {
        //加油站ID_问卷编码_问题编码_选项编码
        var code = dataJYZ[0].GasStationID + "_" + record.QuestionnaireID + "_" + record.QInfoID + "_" + record.QuestionID;
        var name = record.Content + "_" + record.QuestionnaireID + "_" + record.QInfoID;
        var html = "<input type='radio' id='rp_'" + code + " name='" + name + "' value='" + code + "'";
        //选中
        if (record.Answer)
            html = html + " checked";
        //可编辑
        if (!allowModify)
            html = html + " disabled";
        html = html + "/>" + record.Option;
        e.cellHtml = html;

通过拼接一个Id：加油站ID_问卷编码_问题编码_选项编码可以控制“选项”中每一个radio所选择的内容。

这样在保存的时候，就可以根据这个唯一的Id来保存数据了。

整体来说这个实现并不是太难，但是问题是自己的思路需要更开阔一点，写程序之前还是要先思考清楚，然后再去实现，学而不思则罔，思而不学则殆，好好学习技术，好好学习英语，提高自己。