根据数据库动态创建CheckBox

标签：checkbox   数据库   需求   js   

根据数据库动态创建CheckBox

现在的网页都是越做越活，恨不得所有的网页内容都是动态生成可控制的，当然好处是大大的有，维护好维护，同时也是对用户负责，满足用户不同的需求。当然这么做就是前期代码可能难写一点，但是做的灵活了，后期维护简直就是要爽爆了。

         我现在做的一个项目就要求前台的checkbox 是根据数据库表中的字段动态生成的，而且还要基本样式可控制。

         首先大背景：我们前台用的是大家熟知的easyui，这是个好东西，简单快捷方便，语句简单，api全面，方法写的时候也简单，简直是程序员的好帮手，但是正因为它的快捷方便，灵活多变，就注定它对数据格式要求的严格，这个动态生成checkbox感触不是很大，但是easyui tree 生成的时候。。简直是。。改天再聊那个伤疤，今天先说说动态生成checkbox吧

         一：将后台传来的数据拼接成checkbox需要的json格式

                   通过查easyui 的API我们可以得到checkbox需要的基本json格式，然后就需要将我们的数据库传来的数据转换成前台需要的样子。

 public static string ComboboxJson(DataTable dt,string kField,string TextField)
         {
             StringBuilder sb = new StringBuilder();
             sb.Append("[");
             foreach (DataRow dr in dt.Rows)
             {
                 sb.Append("{");
                 sb.AppendFormat("\"id\":\"{0}\",", dr[kField].ToString());
                 sb.AppendFormat("\"text\":\"{0}\"", dr[TextField].ToString());
                 sb.Append("},");            
             }
             if (sb.ToString().EndsWith(","))
             {
                 sb.Remove(sb.Length - 1, 1);
             }
             sb.Append("]");
             return sb.ToString();
         }

         二：公共js向div中生成checkbox

//根据数据库动态添加checkbox
//对象，高度，宽度，div的id四个参数
function addcheckbox(obj, height, width, id) {
    var i;
    var insertDiv = document.getElementById(id);
    insertDiv.innerHTML = "";
    var chkinfo;
    var chkDIV;
    //var txtinfo;  
    //解析从服务器获得的数据,循环添加复选框  
    for (i = 0; i < obj.length; i++) {
        //为每一个复选框创建一个DIV  
        chkDIV = document.createElement("div");
        //每一个复选框用input创建，类型为checkBox  
        chkinfo = document.createElement("input");
        chkinfo.name = "checkboxid";
        chkinfo.id = obj[i].id;
        chkinfo.type = "checkbox";
        //将每一个chinesename为复选框赋值  
        chkinfo.value = obj[i].text;
        //将复选框添加到Div中  
        chkDIV.appendChild(chkinfo);
        //为Div设置样式  
        chkDIV.style.height = height;
        chkDIV.style.width = width;
        chkDIV.style.float = "left";
        chkDIV.align = "left";
        chkDIV.appendChild(document.createTextNode(obj[i].text));
        //将创建的div添加到前台预留的DIV下  
        insertDiv.appendChild(chkDIV);
    }
}

         三：函数的调用

    $.ajax({
            type: "Post",
            url: "Right.ashx",
            data: {'backfunction':'getrolecheckbox'},
            success:function(strJson){
                var obj = eval(strJson);

                addcheckbox(obj, "50px", "150px", "checkbox");
        }
        })

         用户有千变万化的需求，代码不断地改不能怪用户，只能怪自己没有站在用户的角度，好好的为人民服务一把，代码要写灵活，写的抽象，这才刚刚开始啊

根据数据库动态创建CheckBox

标签：checkbox   数据库   需求   js   

原文地址：http://blog.csdn.net/linxi1209163com/article/details/47175553